How to implement DataTables server-side in laravel

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

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

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,

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.

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,

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



16 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.

Leave a Reply

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