How to implement DataTables server-side in laravel

12. September 2016 Intermediate, Laravel 17
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.

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.

Datatables server-side implementation in laravel - justlaravel.com
Datatables server-side implementation in laravel – justlaravel.com

 

Working Demo      Project on Github



17 thoughts on “How to implement DataTables server-side in laravel”

  • 1
    manytostao on September 13, 2016 Reply

    Awesome!!

    • 2
      avinash on September 13, 2016 Reply

      Cheers, thanks for stopping by 🙂

  • 3
    Ganteng on September 21, 2016 Reply

    How to handle this error?

    “DataTable warning table id=DataTables_Table_0 – Ajax Error”

    • 4
      avinash on September 21, 2016 Reply

      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.

    • 5
      Martin Wechselberger on October 9, 2016 Reply

      Had the same issue. Just go to: app/Data.php and change:
      protected $table = ‘bootgrid_data’;
      to
      protected $table = ‘datatables_data’;

  • 6
    Ganteng on September 23, 2016 Reply

    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

  • 7
    Dhanang on October 7, 2016 Reply

    Search feature is not working in my datatables server side, how to fix this? If I search, always no data found.

    Thank you!

  • 9
    Martin Wechselberger on October 8, 2016 Reply

    Great resource!!! Is CRUD also working with server-side datatables?

  • 13
    snifer999 on October 13, 2017 Reply

    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

  • 14
    Yathartha Shrestha on October 20, 2017 Reply

    well, what if you have to deal with 100k data . Can you help me with this scenario?

  • 15
    topmovies31 on February 7, 2019 Reply

    How to add action button that route to edit or delete link on that table

  • 16
    SR on August 26, 2019 Reply

    Hi Avinash, how can we add buttons to export all server side data(selected columns only) to excel/PDF using this approach.

  • 17
    Umesh Rana on August 25, 2020 Reply

    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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.