Using Server Side Data Tables in Laravel

Photo by Ian Battaglia on Unsplash

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. By default DataTables use operating mode of Client-side processing which mean the full data set is loaded up-front and data processing is done in the browser. But if you have a big rows of table, using server-side processing is a good idea instead of using client-side processing.

As a rule of thumb, if you are working with less than 10,000 rows use client-side processing, for greater than 100,000 rows use server-side processing.

In this post I will share about using server-side processing DataTable with yajra/data-tables in Laravel.

Installation
Install yajra/data-tables with following command :

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

Or if you are using most of the DataTables plugins like Buttons & Html, you can alternatively use the all-in-one installer package.

composer require yajra/laravel-datatables:^1.5

This step is optional if you are using Laravel 5.5+

Open the config/app.php file and add following service provider.

'providers' => [
    // ...
    Yajra\DataTables\DataTablesServiceProvider::class,
],

After completing the step above, use the following command to publish configuration & assets:

php artisan vendor:publish --tag=datatables

Usage
In this post I will create a datatables service with the following command :

php artisan datatables:make UserDataTable --model=User

Fix the namespace of the user model, skip this step if it any errors doesn’t occurs.

// From
use User;
// To
use App/Models/User;

The data table class has several functions, including the following :
1. dataTable($query)
This is function for build DataTables class with $query as parameter with return new DataTable instance from source.

dataTable function

2. query(User $model)
The query function works for getting query source of dataTable. You can do some query in this function such as sort by id or anything else.

query function

3. html()
This is an optional method if you want to use html builder.

html function

4. getColumns()
You can create the column or th of your data table with getColumns() function.

getColumns

5. filename()
Get filename for export

filename

In this post I want to create a data tables of user model, in the query function we can modify the query source such as order by or anything else.

public function query(User $model)
{
     // Get source from latest inserted data
     return $model->newQuery()->latest();
}

Then create table header of column that you want to the data table show with add some code in getColumn() function.

protected function getColumns()
{
     return [
         Column::computed('action')
               ->exportable(false)
               ->printable(false)
               ->width(60)
               ->addClass('text-center'),
        Column::make('id')->title('ID'),
        Column::make('name')->title('NAME'),
        Column::make('email')->title('EMAIL),
        Column::make('created_at')->title('CREATED AT'),
    ];
}

Then add the column into the dataTable($query) function.

public function dataTable($query)
{
     return datatables()
            ->eloquent($query)
            ->addColumn('action', function($model){
                return '<div class="action">
                        <a href="'.route('user.edit', $model->id).'" class="btn btn-primary">Edit</a>
                        <a href="'.route('user.destroy', $model->id).'" class="btn btn-danger">Delete</a>
                        </div>';
            })
            ->addColumn('created_at', function($model){
                return Carbon::parse($model->created_at)->isoFormat('D MMM YYYY');
            })
            ->rawColumns(['action']);
}

Modify the user controller

public function index(UserDataTables $dataTable) {
    return $dataTable->render('user.index');
}

Create routes for the user in web.php

Route::resource('user', UserController::class);

In /user/index.blade.php :

@extends('layouts.app')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<style>
    .action {
        display: flex;
    }
    .action a {
       margin: 0 5px;
    }
</style>
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">User Table</div>
                <div class="card-body">
                    <!-- Call the dataTable -->
                    {!! $dataTable->table([], true) !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<!-- Call the dataTable scripts -->
{{ $dataTable->scripts() }}

And here is the result :

Result

Thanks for read my post, please feel free to leave a comment for any questions or suggestions. Share if you find this post is useful. See ya…

References

1. Data Table https://datatables.net/
2. Yajra Data Table https://yajrabox.com/docs/laravel-datatables/master/introduction