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.

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” }

“yajra/laravel-datatables-oracle”: “~6.0”

and add DataTables to providers list /config/app.php

‘providers’ => [ ….. ….. YajraDatatablesDatatablesServiceProvider::class, ],

YajraDatatablesDatatablesServiceProvider::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 previous example,

ID	First Name	Last Name	Email	Gender	Country	Salary

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. $(document).ready(function() { $(‘.datatable’).DataTable({ processing: true, serverSide: true, ajax: ‘{{ route(‘ serverSide ‘) }}’, columnDefs: [{ targets: [0, 1, 2], className: ‘mdl-data-table__cell–non-numeric’ }] }); });     $(document).ready(function() {         $(‘.datatable’).DataTable({             ajax: ‘{{ route(‘ serverSide ‘) }}’,                 className: ‘mdl-data-table__cell–non-numeric’ 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 = AppData::all(); return Datatables::of($users)->make(); } ]); Route::get(‘/serverSide’, [         $users = AppData::all();         return Datatables::of($users)->make(); We used the same model function from previous tutorial, please look there.