Install DataTables with Laravel Using Yajra DataTables Package

Introduction

DataTables is a powerful JavaScript library for creating dynamic, interactive tables with features like pagination, searching, and sorting. In this guide, we'll walk you through the steps of installing and integrating DataTables with a Laravel application using the Yajra DataTables package.

Step 1: Install DataTables

First, install the DataTables.net libraries using npm. Run the following commands in your project root:

npm install datatables.net datatables.net-dt

This will install the DataTables core library along with the DataTables default styling (DT).

Step 2: Include DataTables in Your Project

After installation, you need to include the DataTables assets in your Blade view. In your view file (e.g., resources/views/welcome.blade.php), add the following:

<link rel="stylesheet" type="text/css" href="{{ asset('node_modules/datatables.net-dt/css/jquery.dataTables.css') }}">
<script type="text/javascript" charset="utf8" src="{{ asset('node_modules/datatables.net/js/jquery.dataTables.js') }}"></script>

Step 3: Install Yajra Laravel DataTables Package

Next, you need to install the Yajra DataTables package for Laravel. This package provides a seamless integration of DataTables with Laravel's Eloquent ORM.

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

After installing the package, publish the configuration file by running:

php artisan vendor:publish --tag=datatables

Step 4: Set Up DataTables in Laravel

Now, let's create a route and controller to display a table. For example, add the following route in your routes/web.php:

Route::get('users', [UserController::class, 'index']);

Create the controller using:

php artisan make:controller UserController

In the controller's index() method, fetch user data using Yajra DataTables:

use App\Models\User;
use Yajra\DataTables\Facades\DataTables;

public function index()
{
    if (request()->ajax()) {
        $users = User::select(['id', 'name', 'email', 'created_at', 'updated_at']);
        return DataTables::of($users)
            ->make(true);
    }

    return view('users.index');
}

Step 5: Create a View for DataTables

Create a view file at resources/views/users/index.blade.php and add the following markup to display the table:

<table id="users-table" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
        </tr>
    </thead>
</table>

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

Step 6: Test Your DataTables Integration

Visit /users in your browser, and you should see a table populated with user data from your database. You can search, sort, and paginate the data directly in the browser.

Conclusion

By following these steps, you've successfully integrated DataTables with your Laravel application using the Yajra DataTables package. This setup allows you to easily handle server-side processing and display dynamic tables.

Published By: Krishanu Jadiya
Updated at: 2024-09-14 15:27:29