Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial

  Mar 2024
  Category: Laravel
Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial

Welcome To ITSolutionsGuides,

Yajra Datatables offers an array of functionalities including quick search, pagination, ordering, and sorting. Essentially, Datatables serve as jQuery plugins, enabling the integration of advanced interaction controls into HTML table data. Leveraging AJAX, Datatables facilitate seamless data retrieval and searching. Implementing Datatables in a Laravel application enhances user experience by providing a user-friendly layout for searching and sorting.

In this tutorial, we'll begin by installing the yajra/laravel-datatables composer package. Utilizing Laravel's default "users" table, we'll populate it with dummy users using Tinker. Subsequently, we'll demonstrate how to list all users using Yajra Datatables. With Laravel 11, Datatables empower users to seamlessly search, sort, and paginate data. Follow the steps outlined below to implement these features effectively.

Let's Install Yajra Datatable

Lets install the Yajra Datatable using the following command,

composer require yajra/laravel-datatables

Let's Add Dummy Records

Lets generate the dummy records using the tinker, lets execute the artisan command,
php artisan tinker

after executing the artisan command enter the below command in the terminal to generate 20 dummy users records,


Let's Create Controller

Create controller using artisan command
after fetching the data from the database lets render the data with the 'Datatables::of()' inorder to use this keywords we should add the trait 'use DataTables;'


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

Let's Create Routes


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

Let's Create Blade File

create blade file using artisan command


<!DOCTYPE html>
    <title>Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial - itsolutionsguides</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">Laravel 11 Yajra Datatables with Serverside Rendering Example Tutorial - itsolutionsguides</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},

Let's Run the Application

Lets run the application using the following artisan command

php artisan serve

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

Be the first to know about releases and tutorial news and solutions.

We care about your data in our privacy policy.


ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides