jQuery datatable is very popular for listing data in web application with various interactive features like live-searching, pagination, sorting and more. If you want to use jQuery datatables in your laravel application then here I'm going to show you how to use jQuery-datatables in laravel and how to work for laravel datatables ajax, laravel datatables server-side, datatables customization and more. In this tutorial post, I will use a popular laravel package for datatables named yajra/laravel-datatables for making our task easier. Let's start.
First, we have to Install the yajra/laravel-datatables package by composer command.
composer require yajra/laravel-datatables-oracle:"~9.0"
Now let's define these two routes in the web.phpp route file. You can change the route endpoints according to your application.
Route::get('api/customers','CustomerController@data');
Route::get('customers','CustomerController@index');
Now make a controller to handle the view and feed data to our jQuery datatables. Run the artisan command below to make a controller.
php artisan make:controller CustomerControllerDo code in the controller:
<?php namespace App\Http\Controllers;
use App\Customer;
class CustomerController extends Controller
{
public function index()
{
return view('customers');
}
public function data()
{
$customers = Customer::all();
return datatables()->of($customers)->toJson();
}
}Note: Look from the index method we are just returning a simple view customers which we'll create later and from data method we are returning JSON data for feed it to jQuery datatables. Here we have just used datatables()->of($data)->toJson(); you can find more option from yajra/laravel-datatables documentation.
With help of the datatables()->of() method from the yajra/larave-datatables package, we will get the formated JSON in example.com/api/customers endpoint look like below. So we don't need to do anything about data formation.
{
"draw": 0,
"recordsTotal": 20,
"recordsFiltered": 20,
"data": [
{
"id": 1,
"name": "Kenya",
"email": "Cheyenne.Nolan94@hotmail.com",
"phone": "910-845479",
"dob": "1982-10-22"
},
{
"id": 2,
"name": "Madisen",
"email": "Soledad.Schumm23@yahoo.com",
"phone": "910-450685",
"dob": "1984-09-19"
},
...
...
}
Make a view customers.blade.php inside resources/views directory and add js dependencies. jQuery datatables need the jQuery library. So we have to add it first then datatables CSS and Js file. Let's do that.
Note: You can add CSS, Js library files inside your master layout file, here I'm adding these into customers.blade.php file for tutorial purpose.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8">
<h3>Customers</h3>
<hr>
<table id="customers" class="table table-bordered table-condensed table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
<th>DOB</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- our script will be here -->
</div>
</div>
</div>
@endsection
Now add the code given below at the end of customers.blade.php file for showing data in interactive jQuery datatable. For laravel datatables ajax, set the ajax value of our API endpoint for fetching the customers data and set value true for yajra/laravel-datatables server-side.
$(document).ready(function() {
$.noConflict();
$('#customers').DataTable({
ajax: '',
serverSide: true,
processing: true,
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'phone', name: 'phone'},
{data: 'dob', name: 'dob'}
]
});
})
Browse example.com/customers and you will get the result looks like given output screenshot.
Add a custom column to the datatables
To add a custom column into yajra/laravel-datatables API data use addColumn('coumn_name',callback) method. Suppose we need another column for action like edit, delete button.
public function data()
{
$customers = Customer::all();
return datatables()->of($customers)
->addColumn('action', function ($row) {
$html = '<a href="#" class="btn btn-xs btn-secondary">Edit</a> ';
$html .= '<button data-rowid="'.$row->id.'" class="btn btn-xs btn-danger">Del</button>';
return $html;
})->toJson();
}In HTML markup table add the column
<th>Action</th>Add the column in script's columns array.
{data: 'action', name: 'action'},
Disable searching & sorting for a specific column
To disable searching and sorting for specific column add orderable and searchable false.
{data: 'action', name: 'action', orderable: false, searchable: false},
Add custom ajax loader image to datatables
To add custom ajax loader image to jQuery datatables add the image with oLanguage into the script.
oLanguage: {
sProcessing: "<img src='image_url_here'>"
},
Datatables Pre-sorted data with a specific column
To show datatables data with pre-sorted with a specific column, add the aaSorting property.
aaSorting: [[0, "desc"]],Note: Here 0 refers to the first column of the datatables.
Hope this tutorial post help you to integrate jQuery datatables with yajra/laravel-datatables package. If you find this post helpful to you then please share this post with others so that they will get helped.
