How to implement DataTables server-side in laravel
Hello everyone, welcome back! This post is an extension to a previous post on DataTables, where we initiated data tables with basic initialization. As many readers suggested to make a tutorial on DataTables server-side am doing this and I strongly recommend you to go through the previous post before proceeding as I do not explain in detail about integrating DataTables, I’ll just extend the previous post with a server-side example.
Previous post: How to implement data tables in laravel
Working Demo Project on Github
For using DataTables server-side operations we use yajra data tables plugin. The plugin can be found at github.com/yajra/laravel-datatables.
-
Step 1: Initializing Yajra laravel-datatables plugin
-
Step 2: View part ( showing the table )
-
Step 3: DataTales js part
-
Step 4 : Function to retrieve data from database
Initializing Yajra laravel-datatables plugin
We need to install yajra package using composer for DataTables server-side implementation.
Run the following the command to install it,
composer require yajra/laravel-datatables-oracle:~6.0
or else add the following code to composer.json file and run composer install
"require": {
....
....
"yajra/laravel-datatables-oracle": "~6.0"
}
and add DataTables to providers list /config/app.php
'providers' => [ ..... ..... Yajra\Datatables\DatatablesServiceProvider::class, ],
and finally, we publish the configuration,
php artisan vendor:publish --tag=datatables
View part ( showing the table )
Here we show all the data in a table, we use the same data from the previous example,
<table class="datatable mdl-data-table dataTable" cellspacing="0"
width="100%" role="grid" style="width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Gender</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
the class names used above for table are as suggested by datatables.net/examples/styling/material.html
Working Demo Project on Github
DataTables js part
I use some javascript to initialize DataTables, process server-side requests.
I am using material design here to implement this DataTables server-side implementation, for achieving the material design, I add a few classes to the data table mdl-data-table__cell--non-numeric.
<script>
$(document).ready(function() {
$('.datatable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route(' serverSide ') }}',
columnDefs: [{
targets: [0, 1, 2],
className: 'mdl-data-table__cell--non-numeric'
}]
});
});
</script>
Function to retrieve data from the database
As we see in the above script, the ajax call routes to serverSide, here is the logic for it,
Route::get('/serverSide', [
'as' => 'serverSide',
'uses' => function () {
$users = App\Data::all();
return Datatables::of($users)->make();
}
]);
We used the same model function from the previous tutorial, please look there.
Awesome!!
Cheers, thanks for stopping by 🙂
How to handle this error?
“DataTable warning table id=DataTables_Table_0 – Ajax Error”
hello Ganteng, there is a tech note on this error, https://datatables.net/manual/tech-notes/7 . Please go through the note and see if the problem solves.
Had the same issue. Just go to: app/Data.php and change:
protected $table = ‘bootgrid_data’;
to
protected $table = ‘datatables_data’;
im still getting this error “DataTable warning table id=DataTables_Table_0 – Ajax Error” when i show more than 6 colum
how to resolve?
thanks
Search feature is not working in my datatables server side, how to fix this? If I search, always no data found.
Thank you!
There is a working demo of it at http://justlaravel.com/demos/implement-datatables-server-side-laravel/ and it is working fine there.
The code of it is also available on github https://github.com/avinashn/datatables-serverside-laravel You can compare the code and check where the search functionality went wrong.
Great resource!!! Is CRUD also working with server-side datatables?
Yea, it also possible.
Here is a example describing about it https://datatables.yajrabox.com/eloquent/add-edit-remove-column
Ist there a chance you guys make a tutorial with server-side CRUD datatables?
Yea, will try to extend this post with CRUD operations soon.
for reference datatables CRUD operations without server-side is here : http://justlaravel.com/how-to-implement-datatables-in-laravel/
Hi
how can we add the action column for edit and delete using client side i was able to do it but how can i do it with the server side ?
Do you have any tutorial on it ../
Thank you
well, what if you have to deal with 100k data . Can you help me with this scenario?
How to add action button that route to edit or delete link on that table
Hi Avinash, how can we add buttons to export all server side data(selected columns only) to excel/PDF using this approach.
I have passed some additional parameters from the controller to view using the Yajra datatable like this –
->with([
“cities” => app(\App\Http\Controllers\HelperController::class)->cityListing(),
“leadCounters” => $this->leadCounters
])
->make(true);
I am getting the response in the JSON form as well. But my issue is how to get these parametes in the js side? Actually, I have tried using the normal AJAX success function, but it is not working. So any kind of help would be appreciated.