Hello Devs,

In this tutorial, we will learn about datatable server side example in laravel.

We will implement datatable server side in laravel appliation.

Follow this step by step guide as shown below:



Step 1 : 

Install Laravel App

composer create-project --prefer-dist laravel/laravel blog



Step 2 : 

Setup Database Configuration

open ".env" file and change the database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password



Step 3 :

 Create Route

routes/web.php

Route::get('server-side', 'HomeController@getServerSide')->name('server.side.index');



Step 4 : 

Create Controller

create new controller as HomeController.

php artisan make:controller HomeController

app/http/controller/HomeController.php

<?php

namespace App\Http\Controllers;

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

class HomeController extends Controller
{
    public function getServerSide(Request $request)
    {
         if ($request->ajax()) {
            $users = User::select('*');
            return Datatables::of($users)->make(true);
         }

        return view('serverSide');
    }
}



Step 5 : 

Create Blade File

create server side datatable view file to show serverside.

<!DOCTYPE html>
<html>
<head>
    <title>laravel datatables server side example</title>
    <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" style="margin-top: 100px;margin-bottom: 100px; ">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-info text-white"><h5>Laravel Datatables Server Side Example - rathorji.in</h5></div>
                    <div class="card-body">
                         <table class="data-table mdl-data-table dataTable" cellspacing="0" width="100%" role="grid" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Gender</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
       $(document).ready(function() {
            $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('server.side.index') }}",
                columns: [
                    { "data": "id" },
                    { "data": "name" },
                    { "data": "email" },
                    { "data": "gender" },
                ],
            });
        });
    </script>
</body>
</html>


Run this quick run command:

php artisan serve


Open this URL on browser:

http://localhost:8000/server-side


I hope this example helps you.