• datatables 1

    Simple table
  • datatables 2

    Datatables with buttons
  • datatables 3

    Datatables ajax loading: processing
  • datatables 4

    After datatables ajax loading

Source code:


When displaying and managing tables of data for users, we usually want to have some features like pagination, search, sorting, export to Excel an PDF, and print etc. DataTables is one of the most popular and powerful plugins that can be easily integrated into Laravel. DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

One way to apply DataTables into Laravel is using Yajra Datatables package, another way is to include DataTables css file and js file and call javacript function directly. I prefer the second way, it is clear, and it gives me more flexibility for HTML.

This demo shows three pages of data management: the first page just shows a simple table of employees, the second page shows a table of employees with DataTables installed, while the third page shows DataTables installed and called by Ajax.

For both DataTables pages, following functions are included: number of rows to show, select all, deselect all, copy, csv, excel, pdf, print, column visibility. But here is a big difference between these two pages: DataTables loads all the employees data once and let JavaScript decide how many rows to show, while DataTables Ajax only loads one part of data, for example, if one page only shows 10 entries, then DataTables Ajax only loads 10 employees, when you click “next” button to go to next page, the ajax function is called and it only changes the table body part to show the next 10 employees, all the other elements in the page does not need to reload. This is very useful when we have a large amount of data, it reduces a lot of loading time.