ServerAvatar Logo
Start Free Trial

How to Use Yajra DataTables in Laravel Like a Pro

  • Author: Suresh Ramani
  • Published: 10 August 2025
  • Last Updated: 8 August 2025
Yajra Datatable Laravel

Table Of Contents

Introduction

Have you ever wondered why some web applications feel lightning-fast when handling massive amounts of data, while others crawl like a snail? The secret often lies in how they handle data presentation. Yajra DataTables is like having a Swiss Army knife for your Laravel data – it’s versatile, powerful, and makes complex data operations feel effortless.

If you’re working with Laravel and need to display large datasets efficiently, you’ve probably heard about DataTables. But here’s the thing: most developers barely scratch the surface of what this powerful package can do. Today, we’re going to change that. We’ll dive deep into yajra datatable and transform you from a beginner into someone who wields this tool like a seasoned pro.

What is Yajra DataTables and Why Should You Care?

Think of Yajra DataTables as your data’s personal assistant. Just like a good assistant handles scheduling, filtering emails, and organizing tasks, DataTables manages your data presentation, sorting, searching, and pagination without breaking a sweat.

Yajra DataTables is a Laravel package that seamlessly integrates the popular jQuery DataTables plugin with your Laravel applications. But why should you care? Here’s the deal:

  • Performance: It handles thousands of records without making your browser cry
  • User Experience: Your users get instant search, sorting, and filtering
  • Developer Friendly: Less code, more functionality
  • Flexibility: Customize everything from appearance to behavior

The beauty of yajra datatable lies in its ability to transform boring HTML tables into interactive powerhouses. Whether you’re building an admin panel, a reporting dashboard, or any data-heavy application, this package is your best friend.

Setting Up Your Laravel Environment

Before we dive into the yajra datatable magic, let’s make sure your Laravel environment is ready. You’ll need:

Prerequisites:

  • Laravel 8.0 or higher
  • PHP 7.4 or higher
  • Composer installed
  • Basic understanding of Laravel MVC structure

If you haven’t deployed your Laravel application yet, consider using a reliable hosting solution. For seamless deployment, check out how to Deploy Laravel on VM, VPS or Dedicated Server for professional hosting options.

Verify Your Setup:

Bash
php artisan --version
composer --version

Make sure you have a working database connection configured in your .env file. We’ll need this for our DataTable examples.

Installing and Configuring Yajra DataTables

Now comes the exciting part – installing the yajra datatable package. It’s easier than making morning coffee!

Step 1: Install via Composer

Bash
composer require yajra/laravel-datatables-oracle

Step 2: Publish Configuration (Optional)

Bash
php artisan vendor:publish --tag=datatables

Step 3: Add Service Provider (Laravel < 5.5) If you’re using an older Laravel version, add this to your config/app.php:

PHP
Yajra\DataTables\DataTablesServiceProvider::class,

Step 4: Include DataTables Assets Add these to your layout file:

HTML
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

<!-- JavaScript -->
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

Pro Tip: Always use CDN links for better performance, but keep local copies as fallbacks.

Creating Your First DataTable

Let’s create your first yajra datatable. We’ll start with a simple users table – think of it as your “Hello World” moment with DataTables.

Step 1: Create a Model and Migration

Bash
php artisan make:model User -m

Step 2: Set Up Your Route

PHP
// routes/web.php
Route::get('/users', [UserController::class, 'index'])->name('users.index');
Route::get('/users/data', [UserController::class, 'getData'])->name('users.data');

Step 3: Create the View

Blade
<!-- resources/views/users/index.blade.php -->
<div class="container">
    <h2>Users Management</h2>
    <table id="users-table" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>
</div>

<script>
$(document).ready(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.data') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'actions', name: 'actions', orderable: false}
        ]
    });
});
</script>

Congratulations! You’ve just created your first yajra datatable. But we’re just getting started.

Understanding DataTable Controllers

The controller is where the yajra datatable magic happens. It’s like the conductor of an orchestra, coordinating all the data operations.

Basic Controller Structure:

PHP
<?php

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    public function index()
    {
        return view('users.index');
    }

    public function getData(Request $request)
    {
        if ($request->ajax()) {
            $users = User::select(['id', 'name', 'email', 'created_at']);
            
            return DataTables::of($users)
                ->addColumn('actions', function($user) {
                    return '<a href="#" class="btn btn-sm btn-primary">Edit</a>
                            <a href="#" class="btn btn-sm btn-danger">Delete</a>';
                })
                ->rawColumns(['actions'])
                ->make(true);
        }
    }
}

Key Methods to Remember:

  • addColumn(): Add custom columns
  • editColumn(): Modify existing columns
  • rawColumns(): Allow HTML content
  • filter(): Add custom filters
  • orderColumn(): Custom ordering logic

Mastering Column Definitions

Columns are the building blocks of your yajra datatable. Mastering them is like learning the alphabet – everything else builds upon this foundation.

Basic Column Types:

Text Columns:

JavaScript
{data: 'name', name: 'name', title: 'Full Name'}

Date Columns:

JavaScript
{data: 'created_at', name: 'created_at', title: 'Registration Date'}

Custom Columns:

PHP
->addColumn('status', function($user) {
    return $user->is_active ? 
        '<span class="badge badge-success">Active</span>' :
        '<span class="badge badge-danger">Inactive</span>';
})

Conditional Columns:

PHP
->addColumn('actions', function($user) {
    $actions = '<a href="'.route('users.show', $user->id).'" class="btn btn-info">View</a>';
    
    if(auth()->user()->can('edit-users')) {
        $actions .= ' <a href="'.route('users.edit', $user->id).'" class="btn btn-primary">Edit</a>';
    }
    
    return $actions;
})

Pro Tip: Always sanitize user input when creating custom columns to prevent XSS attacks.

Adding Search and Filter Functionality

Search functionality in yajra datatable is like having a personal detective for your data. It can find anything, anywhere, instantly.

Global Search (Built-in): The global search comes free with DataTables. But you can customize it:

PHP
->filter(function ($query) use ($request) {
    if ($request->has('search')) {
        $search = $request->get('search')['value'];
        $query->where('name', 'like', "%{$search}%")
              ->orWhere('email', 'like', "%{$search}%");
    }
})

Column-Specific Search:

Blade
<input type="text" id="name-search" placeholder="Search by name">
<input type="text" id="email-search" placeholder="Search by email">

<script>
$('#name-search').keyup(function() {
    table.columns(1).search(this.value).draw();
});

$('#email-search').keyup(function() {
    table.columns(2).search(this.value).draw();
});
</script>

Date Range Filters:

PHP
->filter(function ($query) use ($request) {
    if ($request->filled(['start_date', 'end_date'])) {
        $query->whereBetween('created_at', [
            $request->start_date,
            $request->end_date
        ]);
    }
})

Implementing Custom Actions and Buttons

Actions and buttons are like the remote control of your yajra datatable – they give users the power to interact with your data.

Basic Action Buttons:

PHP
->addColumn('actions', function($user) {
    return '
        <div class="btn-group">
            <a href="'.route('users.show', $user->id).'" class="btn btn-sm btn-info" title="View">
                <i class="fa fa-eye"></i>
            </a>
            <a href="'.route('users.edit', $user->id).'" class="btn btn-sm btn-primary" title="Edit">
                <i class="fa fa-edit"></i>
            </a>
            <button class="btn btn-sm btn-danger delete-btn" data-id="'.$user->id.'" title="Delete">
                <i class="fa fa-trash"></i>
            </button>
        </div>
    ';
})

Bulk Actions:

Blade
<div class="bulk-actions">
    <select id="bulk-action">
        <option value="">Select Action</option>
        <option value="delete">Delete Selected</option>
        <option value="activate">Activate Selected</option>
    </select>
    <button id="apply-bulk" class="btn btn-primary">Apply</button>
</div>

JavaScript for Bulk Actions:

JavaScript
$('#apply-bulk').click(function() {
    var action = $('#bulk-action').val();
    var selectedIds = [];
    
    $('.row-checkbox:checked').each(function() {
        selectedIds.push($(this).val());
    });
    
    if(selectedIds.length > 0 && action) {
        // Perform bulk action
        $.ajax({
            url: '/users/bulk-action',
            method: 'POST',
            data: {
                action: action,
                ids: selectedIds,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                table.ajax.reload();
            }
        });
    }
});

Working with Relationships and Joins

When working with yajra datatable, relationships are like family connections – they make your data more meaningful and interconnected.

Basic Relationship Handling:

PHP
public function getData()
{
    $users = User::with('profile', 'roles')
        ->select(['id', 'name', 'email', 'created_at']);
    
    return DataTables::of($users)
        ->addColumn('profile_picture', function($user) {
            return $user->profile && $user->profile->avatar ? 
                '<img src="'.$user->profile->avatar.'" width="50">' : 
                'No Image';
        })
        ->addColumn('roles', function($user) {
            return $user->roles->pluck('name')->implode(', ');
        })
        ->rawColumns(['profile_picture'])
        ->make(true);
}

Join Queries for Better Performance:

PHP
$users = User::leftJoin('profiles', 'users.id', '=', 'profiles.user_id')
    ->leftJoin('user_roles', 'users.id', '=', 'user_roles.user_id')
    ->leftJoin('roles', 'user_roles.role_id', '=', 'roles.id')
    ->select([
        'users.id',
        'users.name',
        'users.email',
        'profiles.avatar',
        'roles.name as role_name'
    ]);

Handling Complex Relationships:

PHP
->editColumn('department', function($user) {
    return $user->profile && $user->profile->department ? 
        $user->profile->department->name : 'Not Assigned';
})

Advanced Styling and Customization

Styling your yajra datatable is like dressing up for a special occasion – it makes everything look more professional and appealing.

Custom CSS Classes:

CSS
.custom-datatable {
    font-family: 'Roboto', sans-serif;
}

.custom-datatable thead th {
    background-color: #3498db;
    color: white;
    font-weight: 600;
}

.custom-datatable tbody tr:hover {
    background-color: #f8f9fa;
}

.status-active {
    color: #28a745;
    font-weight: bold;
}

.status-inactive {
    color: #dc3545;
    font-weight: bold;
}

Bootstrap Integration:

HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

Custom Theme Configuration:

JavaScript
$('#users-table').DataTable({
    // ... other options
    dom: '<"row"<"col-sm-6"l><"col-sm-6"f>>rtip',
    language: {
        search: "Search Users:",
        lengthMenu: "Show _MENU_ users per page",
        info: "Showing _START_ to _END_ of _TOTAL_ users",
        paginate: {
            first: "First",
            last: "Last",
            next: "Next",
            previous: "Previous"
        }
    }
});

Performance Optimization Techniques

Performance optimization for yajra datatable is like tuning a race car – every little improvement makes a big difference in the overall experience.

Database Optimization:

Use Indexes:

PHP
// In your migration
Schema::table('users', function (Blueprint $table) {
    $table->index(['name', 'email']);
    $table->index('created_at');
});

Select Only Required Columns:

PHP
$users = User::select(['id', 'name', 'email', 'created_at'])
    ->with(['profile:id,user_id,avatar']);

Implement Query Scopes:

PHP
// In User Model
public function scopeActive($query)
{
    return $query->where('is_active', true);
}

// In Controller
$users = User::active()->select(['id', 'name', 'email']);

Frontend Optimization:

Enable Server-Side Processing:

JavaScript
$('#users-table').DataTable({
    processing: true,
    serverSide: true,
    deferRender: true,
    // ... other options
});

Optimize Column Rendering:

PHP
->editColumn('created_at', function($user) {
    return $user->created_at->format('M d, Y');
})
->filterColumn('created_at', function($query, $keyword) {
    $query->whereDate('created_at', $keyword);
})

Handling Large Datasets Efficiently

When dealing with massive datasets, your yajra datatable needs to be like a well-oiled machine – efficient, smooth, and never breaking down under pressure.

Pagination Strategies:

JavaScript
$('#users-table').DataTable({
    pageLength: 25,
    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
    processing: true,
    serverSide: true
});

Memory Management:

PHP
public function getData()
{
    $users = User::query();
    
    return DataTables::of($users)
        ->setTotalRecords(User::count()) // Cache total count
        ->setFilteredRecords(User::count()) // Cache filtered count
        ->make(true);
}

Chunked Processing:

PHP
User::chunk(1000, function ($users) {
    foreach ($users as $user) {
        // Process each user
    }
});

Caching Strategies:

PHP
public function getData(Request $request)
{
    $cacheKey = 'users_datatable_' . md5($request->getQueryString());
    
    return Cache::remember($cacheKey, 300, function() use ($request) {
        // Your DataTable logic here
    });
}

Security Best Practices

Security in yajra datatable is like having a good security system in your home – it protects what’s valuable and gives you peace of mind.

Input Validation:

PHP
public function getData(Request $request)
{
    $request->validate([
        'start' => 'integer|min:0',
        'length' => 'integer|min:1|max:100',
        'search.value' => 'string|max:255'
    ]);
    
    // Your logic here
}

SQL Injection Prevention:

PHP
->filter(function ($query) use ($request) {
    if ($request->filled('search.value')) {
        $search = $request->input('search.value');
        $query->where('name', 'LIKE', '%' . $search . '%');
        // Never use raw SQL with user input
    }
})

XSS Protection:

PHP
->addColumn('description', function($user) {
    return e($user->description); // Escape HTML entities
})
->rawColumns(['actions']) // Only allow HTML in specific columns

Authorization Checks:

PHP
public function getData(Request $request)
{
    $this->authorize('view-users');
    
    $users = User::query();
    
    // Filter based on user permissions
    if (!auth()->user()->hasRole('admin')) {
        $users->where('department_id', auth()->user()->department_id);
    }
    
    return DataTables::of($users)->make(true);
}

Common Troubleshooting Issues

Even the best yajra datatable implementations sometimes hiccup. Here are the most common issues and their solutions:

Issue 1: “DataTables warning: table id=example – Invalid JSON response”

Solution:

PHP
// Check your route returns JSON
return DataTables::of($users)->make(true);

// Debug by checking raw response
dd($users->toArray());

Issue 2: Search not working properly

Solution:

PHP
->filterColumn('full_name', function($query, $keyword) {
    $sql = "CONCAT(first_name,' ',last_name) like ?";
    $query->whereRaw($sql, ["%{$keyword}%"]);
})

Issue 3: Actions column not displaying HTML

Solution:

PHP
->rawColumns(['actions', 'status']) // Don't forget this!

Issue 4: Slow performance with large datasets

Solution:

PHP
// Enable server-side processing
'serverSide' => true,

// Optimize queries
$users = User::select(['id', 'name', 'email']); // Only needed columns

Issue 5: CSRF token mismatch

Solution:

Blade
<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

Real-World Examples and Use Cases

Let’s look at some real-world scenarios where yajra datatable shines like a diamond.

E-commerce Order Management:

PHP
public function getOrdersData()
{
    $orders = Order::with(['customer', 'items'])
        ->select(['id', 'order_number', 'customer_id', 'total', 'status', 'created_at']);
    
    return DataTables::of($orders)
        ->addColumn('customer_name', function($order) {
            return $order->customer->name ?? 'Guest';
        })
        ->addColumn('items_count', function($order) {
            return $order->items->count();
        })
        ->editColumn('total', function($order) {
            return '$' . number_format($order->total, 2);
        })
        ->addColumn('actions', function($order) {
            return '<a href="'.route('orders.show', $order->id).'" class="btn btn-info">View</a>
                    <a href="'.route('orders.invoice', $order->id).'" class="btn btn-success">Invoice</a>';
        })
        ->rawColumns(['actions'])
        ->make(true);
}

Employee Management System:

PHP
public function getEmployeesData()
{
    $employees = Employee::with(['department', 'position'])
        ->select(['id', 'employee_id', 'name', 'email', 'department_id', 'position_id', 'salary', 'hire_date']);
    
    return DataTables::of($employees)
        ->addColumn('department_name', function($employee) {
            return $employee->department->name ?? 'Not Assigned';
        })
        ->addColumn('position_title', function($employee) {
            return $employee->position->title ?? 'Not Assigned';
        })
        ->editColumn('salary', function($employee) {
            return '$' . number_format($employee->salary, 0);
        })
        ->editColumn('hire_date', function($employee) {
            return $employee->hire_date->format('M d, Y');
        })
        ->filter(function ($query) use ($request) {
            if ($request->filled('department')) {
                $query->where('department_id', $request->department);
            }
            if ($request->filled('position')) {
                $query->where('position_id', $request->position);
            }
        })
        ->make(true);
}

For more complex applications that require robust hosting, consider checking out professional deployment options at ServerAvatar Laravel Deployment Guide for production-ready setups.

Conclusion

Mastering Yajra DataTables in Laravel is like learning to ride a bike – once you get it, you never forget it, and it opens up a whole new world of possibilities. We’ve covered everything from basic setup to advanced optimization techniques, security best practices, and real-world applications.

Remember, the key to becoming a yajra datatable pro isn’t just about knowing the features – it’s about understanding when and how to use them effectively. Start with simple implementations and gradually add complexity as your needs grow.

The beauty of yajra datatable lies in its flexibility and power. Whether you’re building a simple admin panel or a complex enterprise application, this package provides the tools you need to create exceptional data experiences for your users.

Keep practicing, keep experimenting, and most importantly, keep building amazing applications with Laravel and DataTables!

Frequently Asked Questions

What is the difference between client-side and server-side processing in yajra datatable?

Client-side processing loads all data at once and handles sorting, searching, and pagination in the browser using JavaScript. This works well for smaller datasets (under 1000 records) but can slow down with larger datasets. Server-side processing, on the other hand, sends requests to the server for each operation, making it ideal for large datasets as it only loads the data currently needed for display.

How can I add custom filters to my yajra datatable implementation?

You can add custom filters by using the filter() method in your DataTable controller. Create additional input fields in your view, capture their values via AJAX, and apply them in the filter method. For example, you can filter by date ranges, dropdown selections, or any custom criteria by modifying the query builder within the filter callback function.

Why is my yajra datatable showing “No data available” even though my database has records?

This usually happens due to incorrect route configuration, missing CSRF tokens, or JSON response issues. Check that your DataTable route is correctly defined, ensure the controller method returns DataTables::of($query)->make(true), verify that the AJAX URL in your JavaScript matches your route, and confirm that your controller method is accessible and returning proper JSON responses.

How do I optimize yajra datatable performance for large datasets?

Enable server-side processing, select only required columns in your queries, use database indexes on searchable and sortable columns, implement proper caching strategies, consider pagination limits, and use eager loading for relationships to avoid N+1 query problems. Also, consider using database views or optimized queries for complex data transformations.

Can I export data from yajra datatable to Excel or PDF formats?

Yes, you can integrate export functionality using DataTables’ Buttons extension or create custom export endpoints in Laravel. For Excel exports, you can use Laravel Excel package, and for PDF exports, consider packages like DomPDF or wkhtmltopdf. You can add export buttons to your DataTable configuration and handle the export logic in separate controller methods that format and return the data in the desired format.

Deploy your first application in 10 minutes, Risk Free!

Learn how ServerAvatar simplifies server management with intuitive dashboards and automated processes.
Get Started Now
  • No CC Info Required
  • Free 4-Days Trial
  • Deploy in Next 10 Minutes!