Php

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.

Related Post

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

View Comments

  • Hey I have one question, you don't have defined the route employee/{id}, with this code,does the Show button work? I am noob in Laravel, but this post worked for me to show data in a Datatable (thanks for that!), but i want show more data related when user click at show button, but I don't want send users to another route, can i do that?

Recent Posts

Configure and Retrieve S3 Information Using Laravel PHP-AWS-SDK

This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More

3 months ago

What is the Purpose of php_eol in PHP?

in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More

9 months ago

Laravel Table Relationship Methods With Example

This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More

9 months ago

Exploring the Power of Laravel Eloquent Join?

We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More

9 months ago

Quick and Easy Installation of Laravel Valet

in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More

10 months ago

What is Laravel Soft Delete and How Does it Work?

I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More

10 months ago

Categories