Laravel 11 Yajra Datatables Tutorial

In Laravel 11, Yajra DataTable is a Laravel package that helps you provide advanced features like searching, sorting, and pagination in tables from the server side.

In this tutorial, I’ll show you how to install, set up, and use Yajra DataTables in laravel 11, and also use its searching, sorting, and pagination features in Table data from the server side.

Let’s get started installing and using Yajra DataTables:

Step 1: Install Yajra DataTables

To install yajra dataTables package, run the following command in your Laravel project directory:

composer require yajra/laravel-datatables-oracle

Step 2: Add Records in Database

Make sure that your database table has some data to display in the DataTable. If not, you can checkout Laravel 11 Create Dummy Data using tinker factory.

Step 3: Create a Controller

Create a controller to handle the requests for your DataTable using the following command:

php artisan make:controller DataTableController

Edit your DataTableController.php file from app/http/controllers folder, implement methods to fetch and return data:

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)
    {
        // define your model class here
        $data = YourModelName::select('*');

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

Step 4: Define Routes

Define routes to handle AJAX requests for fetching data for your DataTable in routes/web.php:


use App\Http\Controllers\DataTableController;

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

Step 5: Create Views

To display data from database on HTML table, create view in resources/views folder for your datatable and add jquery datatable with bootstrap in it like following:

<!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: Testing

Run the following artisan command to start your Laravel application:

php artisan serve

Open your browser with http://localhost:8000/list to test your application.

In just 6 steps you can use advanced features of Yajra DataTables by installing them in Laravel 11 application.