How to Customize View/Edit/Delete Buttons Column in AJAX Datatables

Founder of QuickAdminPanel
One of the often customization questions from our customers is about action buttons on Datatables. For every table, we generate three actions – View, Edit and Delete.
How to customize them? Examples:
- How to change texts of buttons?
- How to add more or remove one or more of those buttons?
- How to change this block for different CRUDs individually?
If your table is non-AJAX and you’re not using AJAX Datatables module, then it’s easy – you just go to resources/views/admin/[crud_folder]/index.blade.php of that particular CRUD and edit whatever you want.
But this article is for the case where AJAX Datatables are used, and for that we have one particular include – resources/views/partials/datatablesActions.blade.php:
@can($viewGate) <a class="btn btn-xs btn-primary" href="{{ route('admin.' . $crudRoutePart . '.show', $row->id) }}"> {{ trans('global.view') }} </a> @endcan @can($editGate) <a class="btn btn-xs btn-info" href="{{ route('admin.' . $crudRoutePart . '.edit', $row->id) }}"> {{ trans('global.edit') }} </a> @endcan @can($deleteGate) <form action="{{ route('admin.' . $crudRoutePart . '.destroy', $row->id) }}" method="POST" onsubmit="return confirm('{{ trans('global.areYouSure') }}');" style="display: inline-block;"> <input type="hidden" name="_method" value="DELETE"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <input type="submit" class="btn btn-xs btn-danger" value="{{ trans('global.delete') }}"> </form> @endcan
Now, let’s go through example of customizations we listed above.
Customization 1. How to change texts of buttons?
This one is easy. You can change all the labels like {{ trans(‘global.view’) }} directly in the same file. Keep in mind, it will then change for all project in all tables.
Alternatively, change the translations in resources/lang/global.php file:
Customization 2. Add or Remove buttons.
This one is also straightforward. Just add HTML/Blade code for the button you want. Notice where the button is shown and under which gate/permission – for view/edit/delete.
For example, if you added another action called export() to your controller and routes, you may add the button near View button:
@can($viewGate) <a class="btn btn-xs btn-primary" href="{{ route('admin.' . $crudRoutePart . '.export', $row->id) }}"> {{ trans('global.export') }} </a> <a class="btn btn-xs btn-primary" href="{{ route('admin.' . $crudRoutePart . '.show', $row->id) }}"> {{ trans('global.view') }} </a> @endcan
Customization 3. Separate actions for specific CRUDs
This one is more complicated.
Step 1. Duplicate that resources/views/partials/datatablesActions.blade.php file and copy-paste its contents into the CRUD you want. For example, it will be resources/views/admin/books/datatablesActions.blade.php.
Step 2. Change that new file contents however you want. For example, add export button as in the example above.
Step 3. Go to that CRUDs Controller and in index() method change the blade file that is loaded for actions.
class BooksController extends Controller { public function index(Request $request) { if ($request->ajax()) { $query = Book::query(); $table = Datatables::of($query->get()); $table->addColumn('actions', ' '); $table->editColumn('actions', function ($row) { $viewGate = 'book_show'; $editGate = 'book_edit'; $deleteGate = 'book_delete'; $crudRoutePart = 'books'; // OLD WAY // return view('partials.datatablesActions', compact( // NEW WAY return view('admin.books.datatablesActions', compact( 'viewGate', 'editGate', 'deleteGate', 'crudRoutePart', 'row' )); });
And that’s it – your table will load a different view for that particular CRUD, the other CRUDs will stay with the old datatablesActions include.
Try our QuickAdminPanel generator!
7 Comments
Leave a Reply to Abel Mathew Jacob Cancel reply
Recent Posts
Try our QuickAdminPanel Generator!
How it works:
1. Generate panel online
No coding required, you just choose menu items.
2. Download code & install locally
Install with simple "composer install" and "php artisan migrate".
3. Customize anything!
We give all the code, so you can change anything after download.
What if I’m using ajax Datatables in my QAP admin/index.php to show a list view of the records, and want to simply omit editing for any line item that has a specific field value. For instance, say I’m showing a list of expense account line items, and I generate a line item that shows the balance remaining unspent of that account’s allowance. If I don’t want my user to be able to edit that code-generated record, how do I hide CRUD buttons from that line in Datatables?
Hi Stephen, it’s the same as last point 3 – rewrite that datatablesActions into your own custom include Blade file, and then add @if statement to check if that line button should be visible or not. Maybe you would need to pass additional parameters to that Blade, so you can do that from the Controller, as usual Laravel Controller-View.
Hey, i want when i click Export as PDF, download the entire columns, not just the ones showing off. How i can do that.
Thanks in advance, i really use the system.
Sir can you check this issue
https://github.com/yajra/laravel-datatables/issues/2638
its happening when i generated using quick admin panel
there are 2 tables which has same name and because of that the name is replaced by the relation’s name
Hello Povilas Korop,
We work with QuickAdminPanel and Laravel + jQuery (AdminLTe3 Dashboard)
How can we deactivate the upper bar with PDF, CSV, EXCEL, Print etc. for some tables so that they are no longer displayed in the overview.
we do not use AJAX datatables
I am trying to add svg for all 3 buttons, but I am not able to do it for the delete button as it is using an html form to submit. Please guide me on how to modify it as to add an image instead of the the word ‘Delete’