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.
We will create laravel project with help of the following command.
composer create-project --prefer-dist laravel/laravel simple-laravel
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;
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');
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.
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')); } }?>
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.
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
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
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
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
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?
No, I have just covered laravel listing using datatable. rest of them leave for the user :)