How To Use jQuery Datatable with Laravel

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

We will use laravel 9 to integrate jquery datatable. The datatable provides the functionalities like search, sort, and pagination on a table. You can configure these functionalities by using one-line code. I have already shared a 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 columns, multiple columns searching.

How To Create Laravel 9 Project

We will create laravel project with help of the following command.

composer create-project --prefer-dist laravel/laravel simple-laravel

Setup MySQL Database

Now open .env file and updated MySQL connection.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dummy_db
DB_USERNAME=root
DB_PASSWORD=

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

CREATE TABLE IF NOT EXISTS `employee` (
`id` int(11) NOT NULL COMMENT 'primary key',
  `employee_name` varchar(255) NOT NULL COMMENT 'employee name',
  `employee_salary` double NOT NULL COMMENT 'employee salary',
  `employee_age` int(11) NOT NULL COMMENT 'employee age'
) ENGINE=InnoDB AUTO_INCREMENT=64 DEFAULT CHARSET=latin1 COMMENT='datatable demo table';

--
-- Dumping data for table `employee`
--

INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(2, 'Garrett Winters', 170750, 63),
(3, 'Ashton Cox', 86000, 66),
(4, 'Cedric Kelly', 433060, 22),
(5, 'Airi Satou', 162700, 33),
(6, 'Brielle Williamson', 372000, 61),
(7, 'Herrod Chandler', 137500, 59),
(8, 'Rhona Davidson', 327900, 55),
(9, 'Colleen Hurst', 205500, 39),
(10, 'Sonya Frost', 103600, 23);

--
-- Indexes for table `employee`
--
ALTER TABLE `employee`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `employee`
--
ALTER TABLE `employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',AUTO_INCREMENT=64;

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 the Employee model using the below command. You can get model file into app/ folder

php artisan make:model Employee

The above command will create Employee.php file into app/ folder.

Get Records Using Controller Method

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

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Employee;

class EmpController extends Controller
{
 /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $employees = Employee::all();
        
        return view('emp.index', compact('employees'));
    }
}?>

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 the head section of the file. Let’s add the below code into this file.

<base href="{{URL::asset('/')}}" target="_top">

 	<link rel="stylesheet" href="{{{ URL::asset('css/bootstrap.min.css')}}}">
   	<link rel="stylesheet" href="{{{ URL::asset('font-awesome/4.2.0/css/font-awesome.min.css')}}}">
   	<link rel="stylesheet" href="{{{ URL::asset('fonts/fonts.googleapis.com.css')}}}">



<div class="main-container" id="main-container">

<div class="main-content"> 
     
                @foreach($employees as $key => $emp)
                    
                @endforeach

<table class="table table-striped table-bordered table-hover" id="emp_list">

<thead>

<tr>

<th>ID</th>


<th>Name</th>


<th>Salary</th>


<th>Age</th>


<th>Actions</th>

</tr>

</thead>


<tbody>
<tr>

<td>{{ $emp->id }}</td>


<td>{{ $emp->employee_name }}</td>


<td>{{ $emp->employee_salary }}</td>


<td>{{ $emp->employee_age }}</td>


                        <!-- we will also add show, edit, and delete buttons -->

<td>

                            <!-- show the nerd (uses the show method found at GET /nerds/{id} -->
                            <a class="btn btn-small btn-success" href="{{ URL::to('employee/' . $emp->id) }}">Show</a>

                            <!-- edit this nerd (uses the edit method found at GET /nerds/{id}/edit -->
                            <a class="btn btn-small btn-info" href="{{ URL::to('employee/' . $emp->id . '/edit')}}">Edit</a>

</td>

</tr>
</tbody>

</table>

</div>


  <script type="text/javascript" src="{{{ URL::asset('js/jquery.2.1.1.min.js')}}}"></script>
  <script src="{{{ URL::asset('js/bootstrap.min.js')}}}"></script>

  <script src="{{{ URL::asset('js/jquery.dataTables.min.js')}}}"></script>
  <script src="{{{ URL::asset('js/jquery.dataTables.bootstrap.min.js')}}}"></script>
</div>

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.

<script>
 $(function() {
   $('#emp_list').DataTable();
 });
</script>

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