Install Yajra Datatables Laravel 11 Example
Tags: laravel, laravel11, datatables, php
Published: 2024-04-08 05:30:00

Hello developers, in this guide, we'll see how to install Yajra datatables laravel 11 example. Here, we'll use yajra/laravel-datatables composer package to use data tables in laravel 11. 

In this tutorial, I'll walk you through the straightforward process of installing Yajra Datatables in your Laravel 11 application.

Yajra datatable provides different kinds of functionalities searching, sorting, pagination, ordering, etc, Also you can search on the server side and client side.

Laravel 11 Yajra Datatable Example

> Step 1: Install Laravel 11


First, 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
``` 

> 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


In this step, 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');
 
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>Install Yajra Datatables Laravel 11 Example - Techsolutionstuff</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">Install Yajra Datatables Laravel 11 Example - Techsolutionstuff</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.

```
php artisan serve
```