How To Use jQuery Datatable with Laravel

This laravel tutorial help to create laravel listing with jQuery datatable. The datatable is very powerful and most popular jquery grid plugin.You can create full functional grid using laravel and datatable. I am going to let you know, How to integrate jQuery Datatable with Laravel.

We will use laravel 5.7 to integrate jquery datatable. The datatable provides the functionalities like search, sort, pagination on a table.You can configure these functionality by using one line code.I have already shared tutorial about Laravel CRUD Tutorial Using Resource Controller.

You can also integrate datatable grid functionality with php 7. I have shared jQuery Datatable Using PHP and MySQL with Ajax.

The DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible grid plugin which based on jquery libs. By using Datatable, You can convert basic HTML table listing into advanced grid listing.That can be have inline editing, sorting column, multiple column searching.

How To Create Laravel 5 Project

We will create laravel project with help of following command.
composer create-project --prefer-dist laravel/laravel simple-laravel

SetUp MySQL Database

Now open .env file and updated MySQL connection.

We will create employee table and create sample records into this table.

Create A Controller and Route

php artisan make:controller EmpController --resource

It will create one controller file called EmpController.php into Http/Controller folder.

We register route into web.php file.
Route::resource('emp', 'EmpController');

Create Laravel Model

We will create Employee model using below command.You can get model file into app/ folder
php artisan make:model Employee

Above command will create Employee.php file into app/ folder.

Get Records Using Controller Method

We will modified index method and get all employee list using Model class.

Create View File in Laravel

We will create index.blade.php view file into resources/view/emp folder.The HTML table will use bootstrap, datatable and jquery libs, Here we will include these libs into head section of the file.

Let’s add below code into this file.

In the above code, I have created action button to display single record, edit record and delete record, but you need to defined and write controller action, I haven’t created here.You can get more information from Laravel CRUD Tutorial Using Resource Controller.

Apply Datatable into HTML Table

Let’s apply jQuery datatable into html table listing, The table id is #emp_list So I will implement datatable functionality using jquery script, Let’s add below code at the bottom of the index.blade.php.

Now, Run laravel application using below command –
php artisan serve