datatables 1Simple table
datatables 2Datatables with buttons
datatables 3Datatables ajax loading: processing
datatables 4After datatables ajax loading
Source code: https://github.com/sunnygreentea/laravel-datatables
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 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.