Laravel 11 Yajra Datatables Tutorial

by

Laravel 11 Yajra Datatables Tutorial: Yajra DataTables is a powerful Laravel package designed to enhance table functionality by providing features such as searching, sorting, and pagination directly from the server side. In this tutorial, you’ll learn how to seamlessly integrate and utilize Yajra DataTables in your Laravel 11 application.

Step 1: Install Yajra DataTables

Begin by installing the Yajra DataTables package via Composer:

composer require yajra/laravel-datatables-oracle

Step 2: Prepare Your Database

Ensure your database table contains data that you intend to display using DataTables. If needed, you can generate dummy data using Laravel 11’s Tinker Factory.

Step 3: Create a Controller

Generate a controller to manage DataTable requests:

php artisan make:controller DataTableController

In DataTableController.php, define methods to handle data retrieval:

namespace App\Http\Controllers;

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

class DataTableController extends Controller
{
    public function index()
    {
        return view('index');
    }

    public function getData(Request $request)
    {
        $data = YourModelName::select('*');

        return DataTables::of($data)->make(true);
    }
}

Step 4: Define Routes

Configure routes to process AJAX requests for fetching DataTable data in routes/web.php:

use App\Http\Controllers\DataTableController;

Route::get('list', [DataTableController::class, 'index']);
Route::get('data', [DataTableController::class, 'getData'])->name('data.data');

Step 5: Create Views

Design a view to display database content using DataTables in resources/views:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 DataTables Example - ItcodStuff.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1>Laravel 11 DataTables Example - ItcodStuff.com</h1>
        <table id="dataTable" class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <!-- Add more columns as needed -->
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('data.data') }}",
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    // Add more columns as needed
                ]
            });
        });
    </script>
</body>
</html>

Step 6: Test your app

Launch your Laravel application with:

php artisan serve

Navigate to http://localhost:8000/list in your browser to view and test your DataTables implementation.

By following these six straightforward steps, you can leverage the advanced features of Yajra DataTables to enhance data presentation and interaction within your Laravel 11 application.