Laravel 8 YajraBox Server Side Datatable Tutorial

Share this Article
Reading Time: 6 minutes
1,905 Views

Inside this article we will see the concept of Laravel 8 yajrabox server side datatable tutorial. Yajrabox is nothing, it’s package by the help of which we will integrate server side datatable.

We will implement Ajax DataTable in Laravel i.e Yajrabox DataTable. Datatables provides searching, pagination, ordering, sorting and etc. You need to follow the given steps to implement server side datatable Yajrabox in Laravel.

Let’s get started.


Installation of Laravel Application

Laravel Installation can be done in two ways.

  • Laravel Installer
  • By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install it’s installer first. We need to make use of composer for that.

$ composer global require laravel/installer

This command will install laravel installer at system. This installation is at global scope, so you type command from any directory at terminal. To verify type the given command –

$ laravel

This command will open a command palette of Laravel Installer.

To create ad install laravel project in system,

$ laravel new blog

With the name of blog a laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Learn Composer Installation Steps. Here is the complete command to create a laravel project-

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

After following these steps we can install a Laravel application into system.

To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Assuming laravel already installed at system.

Database also configured with application.


Install Yajra Datatable

To install yajrabox, we need to run a composer command. Open up the terminal and type this command and execute.

$ composer require yajra/laravel-datatables-oracle

While installation of this package, you will get such type of screen over terminal.


Update Application Provider List

After installation yajra package via composer, we need to go into laravel application and open /config/app.php.

Add this code to providers array.

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

Migration & Dump Test Data

To migrate default migrations of application to database, we need to run this command.

$ php artisan migrate

It will run all pending migrations.

Next, we need test data. We have two options to add fake data to users table.

  • By using Tinker Shell to Run
  • By using DatabaseSeeder.php file

Artisan Tinker Shell

Using DatabaseSeeder.php

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
         \App\Models\User::factory(100)->create();
    }
}

To run this seeder, back to terminal and type the command as –

$ php artisan db:seed

Create Route

Add a route to /routes/web.php to open the list. Open up the file web.php and add this route code.

//.. Other route

Route::get('users', [UserController::class, 'index'])->name('users.index');

Create Controller

Next, we need UserController. To create this controller, we have to run artisan command. Controllers will be stored inside /app/Http/Controllers

$ php artisan make:controller UserController

Open up the file from /app/Http/Controllers/UserController.php

<?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('*');
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
     
                           $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
    
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
        
        return view('users');
    }
}

Create Blade Layout File

To create blade layout file, go to /resources/views folder. Create a file users.blade.php. Open up the file and write this complete code into it.

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 8 YajraBox Datatable Tutorial - Online Web Tutor</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" style="margin-top: 50px;">
        <h4 style="text-align: center;">Laravel 8 YajraBox Datatable Tutorial - Online Web Tutor</h4>
        <table class="table table-bordered" id="data-table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

</body>

<script type="text/javascript">
$(function() {

    var table = $('#data-table').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>

Application Testing

Open project to terminal and type the command to start development server

$ php artisan serve

Open up the URL – 127.0.01:8000/users

We hope this article helped you to learn about Laravel 8 YajraBox Server Side Datatable Tutorial in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on Laravel 8 Articles here

Leave a Comment