Laravel 9 Yajra Datatables Example Tutorial

We will be discussing the use of yajra data tables in Laravel 9 with the help of an example.

Yajra Datatables provides us with a quick search, pagination, ordering, sorting, etc. Datatables are jQuery plugins that enable you to add advanced interaction controls to your HTML tables data. Datatables also offer ajax for data searching and getting.

In the below example, we will be using the default “users” table and add some dummy users to it using tinker. After that, we will simply list all users using yajra data tables. Let’s see the below steps:

Step 1: Install Laravel 9

If you have not installed the Laravel app, then use the below command:

composer create-project laravel/laravel example-app

Step 2: Install Yajra Datatable

Install yajra datatable through the Composer package manager, using the below command:

composer require yajra/laravel-datatables-oracle

Step 3: Add Dummy Users

Create some dummy users using the tinker factory. Run the below command:

php artisan tinker
  
User::factory()->count(20)->create()

Step 4: Create Controller

Create a new controller as UserController. this controller is used to manage the layout and get data requests and return responses, so use the below content in the controller file:

 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');
    }
}

Step 5: Add Route

Creates route for data tables layout file and another one for getting data. Open your “routes/web.php” file and add the following route.

 routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group that
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('users', [UserController::class, 'index'])->name('users.index');

Step 6:  Create Blade File

Create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and use the following code:

 resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Yajra Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.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.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
     
<div class="container">
    <h1>Laravel 9 Yajra Datatables Tutorial</h1>
    <table class="table table-bordered 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>

Run Laravel App

Type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, navigate to your web browser, type the given URL and view the app output:

Output:

yajra datatables tutorial


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420