Laravel 9 Yajra Server Side Datatables Tutorial
Tags: laravel, javascript, beginners, tutorial
Published: 2022-04-11 13:16:40

In this blog, We are going to know about Server Side Datatable using Laravel 9. Data Table is one of the most important plugins in the jQuery Library to show data in tables with the advanced search function.

Datatables are very important for showing large data in the table. the main advantage of the data table is it gives to users the advanced search function to filter data and It also provides a lot of user-friendly functionalities like sort, pagination, and searches, and other functions to handle the database data in our web pages.

We will use using yajra/laravel-datatables-oracle package for the server side datatables.

### Step 1: Install Laravel Project
First, open Terminal and run the following command to create a fresh laravel project:
```
composer create-project --prefer-dist laravel/laravel laravel-datatable-example
```
or, if you have installed the Laravel Installer as a global composer dependency:
```
laravel new laravel-datatable-example
```
### Step 2: Configure Database Details
After, Installation Go to the project root directory, open .env file, and set database detail as follow:
```
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>
```
### Step 3: Install Yajra Datatables
To install yajra datatables, we need to run a composer command. Open up the terminal and type this command and execute.
```
composer require yajra/laravel-datatables-oracle:"~9.0"
```
This package is made to handle the server-side performance of jQuery plugin datatables via AJAX using Eloquent ORM, Query Builder, or Collection.
### Step 4: Create Dummy Data
In this step, we will create some dummy users using the tinker factory. so let's create dummy records using below command:
First, Open tinker using this command
```
php artisan tinker
```
After opening tinker run the following command for creating dummy records
```
User::factory()->count(500)->create()
```
### Step 5: Add Route
In this step, we need to create a route for datatables layout file and another one for getting data. so open your routes/web.php file and add the following route.
```
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index'])->name('users.index');
```
###Step 6: Create Controller
At this point, now we should create a new controller as UserController. this controller will manage layout and getting data requests and return a response, so put below content in the controller file:
```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use DataTables;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::select('id','name','email')->get();
            return Datatables::of($data)->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="btn btn-primary btn-sm">View</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('users');
    }
}
```
### Step 7: Create Blade File
In the last step, let's create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and put the following code:
```
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Server Side Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 table-responsive">
            <table class="table table-bordered user_datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    var table = $('.user_datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });
</script>
</html>
```
Now we are ready to run our example so run the below command:
```
php artisan serve
```
Now you can open the below URL on your browser:
http://localhost:8000/users
Thank you for reading this blog.