Laravel ajax datatables tutorial

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.

 

Laravel yajra/laravel-datatables ajax steps

1. Install the yajra/laravel-datatables package.
2. Define routes.
3. Make a controller for datatable.
4. Make view and add Js libraries.
5. Code for jQuery datatables.

 

1. Install the yajra/laravel-datatables package

First, we have to Install the yajra/laravel-datatables package by composer command.

composer require yajra/laravel-datatables-oracle:"~9.0"

 

2. Define routes

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');

 

3. Make a controller for datatable

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 CustomerController

Do 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"
    },

    ...
    ...
}

 

4. Make view and add Js libraries.

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 

 

5. Code for jQuery datatables

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'}
        ]
    });
})

 

Output Laravel-Datatable

Browse example.com/customers and you will get the result looks like given output screenshot.

 

Laravel Datatables customization

 

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.