Laravel 11 Install Yajra Datatable Example

Websolutionstuff | Apr-10-2024 | Categories : Laravel

In this tutorial, we'll explore an example of installing Yajra Datatable in Laravel 11. In every project, it's essential to display records with a visually appealing UI, and we often need features like easy searching, sorting, and pagination. Yajra Datatable helps us achieve this easily.

So, in this guide, I'll show you how to easily install Yajra Datatable in Laravel 11. we'll use yajra/laravel-datatables composer package.

Table of Contents:

Step 1: Install Laravel 11

Step 2: Install Yajra Datatables

Step 3: Add Dummy Users

Step 4: Create Controller

Step 5: Create Route

Step 6: Create Blade File

Step 7: Run the Laravel App

Step 1: Install Laravel 11

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

Step 2: Install Yajra Datatables

Then, we'll install yajra/datatable composer package using the following command.

composer require yajra/laravel-datatables

Read Also: Laravel 11 Create CRUD Operation with Database

Step 3: Add Dummy Users

Now, we'll create some dummy records using the tinker. So, run the following command.

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

Step 4: Create Controller

Then, we'll create a UserController.php file. In this file, we'll define the function and add the datatable.

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.
     * Yajra Datatable Laravel 11 - techsolutionstuff
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {

            $data = User::query();

            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
       
                            $btn = '<a href="javascript:void(0)" data-id="'.$row->id.'" class="edit btn btn-primary btn-sm">View</a>';
                            $btn .= '<a href="javascript:void(0)" data-id="'.$row->id.'" class="delete btn btn-danger btn-sm">Delete</a>';
      
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
          
        return view('users');
    }
}

Step 5: Create Route

Now, define the routes into the web.php file. So, add the following code snippets.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\UserController;
    
Route::get('users', [UserController::class, 'index'])->name('users.index');

Read Also: How to File Upload in Angular 17 Tutorial

Step 6: Create Blade File

Then, we'll create a users.blade.php file to display yajra datatable.

resources/views/users.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Install Yajra Datatable Example - Websolutionstuff</title>
    <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://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
</head>
<body>
       
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Install Yajra Datatable Example - Websolutionstuff</h3>
        <div class="card-body">
            <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>
    </div>
</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>

Step 7: Run the Laravel App

Now, run the laravel 11 application using the following command.