How To Use Yajra Datatables In Laravel 9

Yajra DataTables in laravel 9; In this tutorial guide, i am going to show you how to install and use yajra DataTables in laravel 9 applications.

Yajra DataTables provides package for laravel. Which is used to searching, sorting, pagination on the table and display lists. And you can install it by this command composer require yajra/laravel-datatables-oracle in laravel app.

How to Use Yajra Datatables Server Side in Laravel 9

Use the below given simple steps to install and use yajra dataTables in laravel 9 apps:

  • Step 1 – Installing Laravel 9 App
  • Step 2 – Configuring .evn file for Database
  • Step 3 – Installing Laravel Yajra DataTables
  • Step 4 – Run Migration
  • Step 5 – Add Dummy Record
  • Step 6 – Create Route,
  • Step 7 – Creating Datatables Controller
  • Step 8 – Create DataTable Blade View
  • Step 9 – Start Development Server

Step 1 – Installing Laravel 9 App

In step 1, open your terminal and navigate to your local web server directory using the following command:

//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html

Then install laravel latest application using the following command:

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

Step 2 – Configuring .evn file for Database

In step 2, open your downloaded laravel app into any text editor. Then find .env file and configure database detail like following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3 – Installing Laravel Yajra DataTables

In step 3, Navigate to your downloaded LaravelDataTables directory. And then install Yajra Datatables Packages in your laravel. Open terminal and run the following command:

cd / LaravelDataTables

composer require yajra/laravel-datatables-oracle
config/app.php

 'providers' => [
   
   Yajra\Datatables\DatatablesServiceProvider::class,
],

 'aliases' => [

  'Datatables' => Yajra\Datatables\Facades\Datatables::class,
] 

Then publish laravel datatables vendor package by using the following command:

php artisan vendor:publish

Step 4 – Run Migration

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

php artisan migrate

Step 5 – Add Dummy Record

In step 5, Navigate to database/seeders/ directory and add the following code into it for add fake records into database table users:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

use App\Models\User;

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

Then use the following command to seeds db:

php artisan db:seed

Then will see this “Database seeding completed successfully.” on command prompt.

Step 6 – Create Route

In step 6, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:

use App\Http\Controllers\DataTablesController;

Route::get('yajra-datatables', [DataTablesController::class, 'index']);

Step 7 – Creating Datatables Controller

In step 7, create datatable controller by using the following command:

php artisan make:controller DataTablesController

The above command will create DataTablesController.php file, which is located inside LaravelDataTables/app/Http/Controllers/ directory. So add the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

use Datatables;

class DataTablesController extends Controller
{
    public function index(){
    	
    	if(request()->ajax()) {
            return datatables()->of(User::select('*'))
            ->addIndexColumn()
            ->make(true);
        }
        return view('datatables');
    }
}

Step 8 – Create DataTable Blade View

In step 8, create new blade view file that named datatables.blade.php inside resources/views directory for display list using yajra datatables in laravel.

And add the following jQuery yajra datatbles libraries into datatables.blade.php:

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

Also add the following jQuery and ajax code into datatables.blade.php to get data from database table with pagination:

<script type="text/javascript">
     
 $(document).ready( function () {
    $('#datatables-example').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('yajra-datatables') }}",
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                 ]
       });
    });
</script>

Don’t worry i have already added the jquery datatables libraries and ajax code on datatables.blade.php.

So, add the following code into datatables.blade.php file:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 DataTables Example</title>

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">

  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

</head>
<body>

<div class="container mt-4">

  <div class="card">

    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 9 DataTables Example Tutorial</h2>
    </div>

    <div class="card-body">

        <table class="table table-bordered" id="datatables-example">
           <thead>
              <tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Created at</th>
              </tr>
           </thead>
        </table>

    </div>

  </div>
<script type="text/javascript">
     
 $(document).ready( function () {
    $('#datatables-example').DataTable({
           processing: true,
           serverSide: true,
           ajax: "{{ url('yajra-datatables') }}",
           columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                 ]
       });
    });
</script>
</div>  
</body>
</html>

Step 9 – Start Development Server

In step 9, open your browser and fire the following url into your browser:

http://127.0.0.1:8000/yajra-datatables

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *