Laravel 11 Yajra DataTables Tutorial: Server-Side Processing Example

What is Yajra DataTables in Laravel?

Yajra DataTables (officially yajra/laravel-datatables-oracle) is one of the most popular and powerful Laravel packages for integrating the famous jQuery DataTables plugin into Laravel applications. It acts as a bridge that allows developers to implement advanced, interactive data tables with minimal custom JavaScript or backend logic.

At its core, Yajra DataTables enables server-side processing — meaning pagination, searching, sorting, and filtering happen on the server (using Laravel's Eloquent ORM, Query Builder, or even Collections) rather than loading everything into the browser. This makes it ideal for handling large datasets — think thousands or millions of records — without slowing down the frontend.

The package provides a fluent API via the DataTables facade. A simple example looks like this:

return DataTables::of(User::query())
    ->addIndexColumn()
    ->addColumn('action', function($row) {
        return '<a href="#" class="btn btn-sm btn-primary">Edit</a>';
    })
    ->rawColumns(['action'])
    ->make(true);

Key components include support for adding custom columns, editing date formats, rendering HTML safely with rawColumns(), row styling, exporting (via the companion Buttons plugin), and seamless integration with Laravel's routing and Blade views. As of 2026, the package remains actively maintained (latest versions support Laravel 12+ and PHP 8.2+), with over 5 million downloads on Packagist, proving its reliability in production apps worldwide.

Unlike building raw AJAX tables from scratch, Yajra handles the complex server-client protocol automatically: it reads DataTables' sent parameters (like draw, start, length, search[value], order) and returns JSON in the exact format DataTables expects. This saves hours of development time and reduces bugs. It's especially valuable in admin panels, dashboards, CRM systems, e-commerce backends, and any Laravel app displaying dynamic tabular data.

Table Of Content

1 Prerequisites

• PHP 8.2+ and Composer installed.
• A database (e.g., MySQL) set up.
• Node.js for asset compilation (if using Vite; optional for CDN-based JS/CSS).
• Basic Laravel knowledge.

2 Introduction

Below is a complete, working implementation of Yajra DataTables with server-side processing in Laravel 11. This example uses the default users table, seeds it with 100 dummy records, and sets up a DataTable with search, sort, pagination, and an action column (e.g., for edit/delete buttons). I've compiled all the necessary code snippets into a step-by-step guide, ensuring it's ready to copy-paste and run.

This is based on standard best practices for Laravel 11 and Yajra DataTables v11.x (compatible as of my latest knowledge). Test it in a fresh Laravel project.

3 Create a New Laravel 11 Project

3.1 Install Laravel Project

Ensure your system has Composer installed. Run the following command to create a new Laravel project:

composer create-project laravel/laravel laravel-yajra-datatables

Then, navigate to your project directory:

cd laravel-yajra-datatables

3.2 Configure MySql Database

In the .env file, define the database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel11
DB_USERNAME=root
DB_PASSWORD=

4 Install Yajra DataTables Package

To integrate Yajra DataTables with Laravel 11, install the Yajra DataTables package via Composer:

    
       composer require yajra/laravel-datatables-oracle:"^11.0"
   

Next, publish the package’s configuration and assets:

    
        php artisan vendor:publish --tag=datatables
   

No need to add providers/aliases in Laravel 11 (auto-discovery handles it).

5 Seed Dummy Data (Users Table)

    
       php artisan make:seeder UserSeeder
   

    
      namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\User;
use Faker\Factory as Faker;

class UserSeeder extends Seeder
{
    public function run(): void
    {
        $faker = Faker::create();
        foreach (range(1, 100) as $index) {
            User::create([
                'name' => $faker->name,
                'email' => $faker->unique()->safeEmail,
                'password' => bcrypt('password'), // Default password
            ]);
        }
    }
}
   

Run the seeder:

    
      php artisan db:seed --class=UserSeeder
   

6 Create Controller - UserController

php artisan make:controller UserController

The index method handles AJAX requests from DataTables for server-side processing (pagination, search, sort). For non-AJAX, it loads the view.

<?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Yajra\DataTables\DataTables;

class UserController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::query(); // Or User::select('*') for specific columns
            return DataTables::of($data)
                ->addIndexColumn() // Adds row index
                ->addColumn('action', function ($row) {
                    $btn = 'Edit';
                    $btn .= ' Delete';
                    return $btn;
                })
                ->rawColumns(['action']) // Prevents HTML escaping in action column
                ->make(true);
        }

        return view('users');
    }
}
?>

7 Define a Route

In the routes/web.php file, define the following routes:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/', function () {
    return view('welcome');
});

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

8 Create Blade File

Create a Blade file resources/views/users.blade.php to display the DataTable:

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 Yajra DataTables Example</title>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <!-- Bootstrap CSS (optional for buttons) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2>Laravel 11 Yajra DataTables Server-Side Processing</h2>
        <table class="table table-bordered" id="users-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('users.index') }}", // Route to controller
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });
    </script>
</body>
</html>

9 Folder Structure

Ensure the folder structure is correctly set up with controllers, views, and routes to maintain the app's organization.

10 Run Laravel Server to Test the App

To test the application, run the following artisan command:

php artisan serve

Visit http://127.0.0.1:8000/users in your browser. You should see a DataTable with 100 users, supporting search, sort, and pagination on the server side.

Troubleshooting

• If DataTables shows "No data available": Check database connection and seeded data.
• AJAX errors: Ensure route is correct and controller handles AJAX.
• "Cannot reinitialise DataTable": Avoid multiple initializations.
• For production: Use Vite to bundle assets instead of CDNs.

11 Conclusion

Integrating Yajra DataTables in Laravel 11 (or 12) is a fast, reliable way to add powerful, interactive tables with server-side processing. This tutorial walked you through the full setup: installing the package, seeding data, creating a controller with the DataTables facade, defining routes, and building a responsive Blade view with AJAX-powered search, sort, and pagination.

The biggest advantage? Minimal custom code delivers professional features — even for large datasets — while keeping your application clean and scalable. Yajra remains a top choice in 2026 for admin panels, CRMs, reports, and any Laravel app displaying tabular data.

Ready to level up? Add export buttons (CSV/Excel/PDF), custom filters, row styling, or secure actions with policies. Switch to Vite for modern asset handling in production.

Thanks for following this Laravel 11 Yajra DataTables tutorial! Share it if it helped, and feel free to comment with your enhancements or questions.

Happy coding!

Frequently Asked Questions