How to Use Yajra Datatables in Laravel 11?




How to Use Yajra Datatables in Laravel 11?

Hi, Dev

In this guide, I'll demonstrate the utilization of Yajra Datatables within a Laravel 11 project. Our tool of choice will be the `yajra/laravel-datatables` composer package, empowering us to seamlessly integrate datatables into our Laravel 11 application.

Yajra Datatables equips us with convenient features like quick search, pagination, ordering, and sorting. Essentially, Datatables serve as jQuery plugins facilitating the integration of advanced interaction controls into your HTML table data. Moreover, Datatables offer AJAX functionality for efficient data searching and retrieval. Leveraging Datatables, you can craft user-friendly layouts for seamless searching and sorting experiences. Integrating Datatables into your Laravel application is also easily achievable.

In this example, we will install the yajra/laravel-datatables composer package. We will use the default "users" table and add some dummy users to it using Tinker. Then, we will simply list all users using Yajra Datatables. You can search, sort, and paginate using Datatables in Laravel 11. So let's follow the steps below and get it done.

Step for How to use Yajra Datatables in Laravel 11?

Step 1: Install Laravel 11

Step 2: Install Yajra Datatable

Step 3: Add Dummy Users

Step 4: Create Controller

Step 5: Create Route

Step 6: Create Blade File

Run Laravel App

Follow the below steps:

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install Yajra Datatable

In this step, we need to install Yajra Datatable via the Composer package manager, so open your terminal and fire the below command:

composer require yajra/laravel-datatables

Step 3: Add Dummy Users

In this step, we will create some dummy users using Tinker Factory. So let's create dummy records using the below command:

php artisan tinker


Step 4: Create Controller

In this point, now we should create a new controller as UserController. This controller will manage layout and handle data requests, returning responses. So, put the content below in the controller file:



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::query();

return Datatables::of($data)


->addColumn('action', function($row){

$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View </a>';

return $btn;





return view('users');



Step 5: Add Route

In this step, we need to create a route for the DataTables layout file and another one for getting data. So open your "routes/web.php" file and add the following route.



use Illuminate\Support\Facades\Route;

use App\Http\Controllers\UserController;

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

Step 6: Create Blade File

In Last step, let's create users.blade.php(resources/views/users.blade.php) for layout and we will write design code here and put following code:


<!DOCTYPE html>



<title> How to Use Yajra Datatables in Laravel 11? -</title>

<link href="" rel="stylesheet">

<link href="" rel="stylesheet">

<script src=""></script>

<script src=""></script>

<script src=""></script>



<div class="container">

<div class="card mt-5">

<h3 class="card-header p-3"> How to Use Yajra Datatables in Laravel 11? -</h3>

<div class="card-body">

<table class="table table-bordered data-table">






<th width="100px">Action</th>










<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},






Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

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




I hope it can help you...

#Laravel 11