DataTable and Laravel

Tram Ho

1. Introduction:

Not sure how to display tabular data on your website? Are you having trouble with the  <td>  tags in the HTML table? This article will be a simple but effective solution for you!

Preview a board I built in just 3 minutes ^^

2. A brief overview of Data Table:

Data Table is a way to display tabular data on your website “dynamic” and “smarter” with HTML tables. It also allows users to perform simple operations such as searching, sorting, filtering, pagination and see the results right on the table interface without having to switch pages.

Technology used:

As the title says, this article is a solution for websites using the Laravel framework, and I will use some packages and plug-ins as below:

  1. Laravel 5.5+
  2. jQuery DataTables v1.10.x
  3. yajra/laravel-datatables: v1.5

3. Settings:

First, we need to install the jQuery DataTables plug-in, you can choose 1 of 3 settings that the developer offers:

CDN: We can easily import files into the project without installation as follows:

NPM: Run the following 2 commands and we can use datatables:

Bower: Bower is a very useful way of managing packages:

Next we need to install the Laravel-DataTables package with the composer command:

And run the artisan command to publish the config:

That’s it, the installation is complete!

4. Demo and approaches:

Depending on the code style and requirements of the project in use, I offer two approaches as follows:

Using Datatables::make() and AJAX:

This will be pretty quick, but you’ll need a little bit of JavaScript handling:

Route: Declare route to get data in routes/app.php:

Controller: In the handler Controller, we use class Datatables and process the code as follows:

View: Add the following code in the view page views/users/list.blade.php where you want to display the table:

javaScript: Handling data retrieval and rendering with AJAX:

Handling with DataTable Controller:

If you want to spend time learning more about Laravel-DataTables package, then I recommend you to use this method.

DataTable Controller: First we need to create a new DataTable Controller to handle the Table build:

Laravel will automatically create a new Controller at app/DataTables/UsersDataTable.php , We proceed to add functions to handle table construction:

Controller: Handle in UserController you just need the UsersDataTable dependency:

View: The display of the view is also handled more simply with the following code on the view page views/users/list.blade.php :

And those are two approaches you can use when building tables with DataTables and Laravel DataTables.

5. Customize DataTable:

If you only display data as text, then there is nothing to worry about. But most of us would like to be able to add some kind of column or other functionality. Here are the ways to customize in the data table:

Index Column:

Index column with auto-incrementing sequence number defined in config/datatables.php:

Index column with auto-incrementing sequence number defined in

And the name of the column will be DT_RowIndex :

Raw Columns:

With the raw column option, we can customize the columns displayed with other HTML tags as follows:

Searching:

We can also customize the search box in the Data Table with filter api as follows:

Ordering:

Similar to search, we can also not use the default ordering of the package, but customize it in our own way using order api:

And there are many other options for customizing your table, as well as operations on the table. Readers can learn more at the package’s document to link below the reference.

6. Conclusion:

Thus, I have introduced to you some Data Table approaches with Laravel. Hope you can pick up a few skills when working with data tables in your Laravel project. Thank you for reading my post. If you have something to share or suggest, write it down in the comments section!

References:

Share the news now