Laravel 9 Yajra Server Side Datatables Tutorial - TechvBlogs

Laravel 9 Yajra Server Side Datatables Tutorial

In this blog, We are going to know about Server Side Datatable using Laravel 9. Datatables provide us quick search, pagination, ordering, sorting and etc.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

1 year ago

TechvBlogs - Google News

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 that it gives to users the advanced search function to filter data and It also provides a lot of user-friendly functionalities like sort, pagination, 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 data tables.

Step 1: Install Laravel Project

First, open Terminal and run the following command to create a fresh laravel project:

#! /bin/bash
composer create-project --prefer-dist laravel/laravel laravel-datatable-example

or, if you have installed the Laravel Installer as a global composer dependency:

#! /bin/bash
laravel new laravel-datatable-example

Step 2: Configure Database Details

After, Installation Go to the project root directory, open the .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>

Read Also: How To Install WordPress with LAMP on Ubuntu 20.04

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.

#! /bin/bash
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 the 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 the data tables 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');

Read Also: Password and Confirm Password Validation in Laravel

Step 6: Create Controller

At this point, now we should create a new controller as UserController. this controller will manage layout and get data requests and return a response, so put the 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 the 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:

#! /bin/bash
php artisan serve

Now you can open the below URL on your browser:

http://localhost:8000/users

Thank you for reading this blog.

Read Also: How to Get Previous and Next Record in Laravel

If you want to manage your VPS / VM Server without touching the command line go and  Checkout this linkServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a  matter of minutes.  You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

Comments (4)

mingho mingho 1 year ago

by this tutorial if we load 10000 data it still heavy to load, if we follow this way https://yajrabox.com/docs/laravel-datatables/master/quick-starter

it easy to load 10000 data. do you know why?

Suresh Ramani Suresh Ramani 1 year ago

You can show a number of records page. Also, you need to select data from the database which is required to show on the table. Its reduce database load time also. so, you have to consider all these things.

Harry Harry 1 year ago

Thank you very much for your tutorial. But i wonder, how to edit and delete data using yajra?

FLIGHT 404 FLIGHT 404 1 year ago

You don't need to execute $data = User::select('id','name','email')->get(); the documentation says return Datatables::eloquent(User::query())->make(true); without calling the get method!

$data = User::select('id','name','email'); return Datatables::of($data)->make(true);

Comment


Note: All Input Fields are required.