How to implement DataTables server-side in laravel
Hello every one, 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 previous post with server-side example.

Previous post : How to implement datatables in laravel
For using DataTables server-side operations we use yajra datatables 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.
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=datatablesView part ( showing the table )
Here we show all the data in a table, we use the same data from 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
DataTables js part
We use some java script to initialize DataTables, process server-side requests and for the material design part we use.
<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 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 previous tutorial, please look there.


