laravel_datatables.md

To install DataTables in a Laravel 12 project, you typically use the yajra/laravel-datatables package, which provides server-side processing support for jQuery DataTables. Here's a complete step-by-step guide:

✅ Step 1: Install the Package via Composer

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

This version is compatible with Laravel 10–12.

✅ Step 2: Publish the Configuration (optional)

php artisan vendor:publish --tag=datatables

This will create a config/datatables.php config file.

✅ Step 3: Create a Controller for the DataTable Logic

You can create a controller like this:

php artisan make:controller UserController

Inside UserController.php:

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

public function index(Request $request)
{
    if ($request->ajax()) {
        $data = User::query();
        return DataTables::of($data)
            ->addIndexColumn()
            ->make(true);
    }

    return view('users.index');
}

✅ Step 4: Create a Route

In routes/web.php:

use App\Http\Controllers\UserController;

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

✅ Step 5: Set Up the Blade View

In resources/views/users/index.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 12 DataTable</title>
    <link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>User Table</h2>
    <table class="table" id="users-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
            </tr>
        </thead>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('users') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
        ]
    });
});
</script>

</body>
</html>

Let me know if you’d like a version with custom filters, actions, or column formatting.

mariogarcia-ar/laravel_datatables.md

✅ Step 1: Install the Package via Composer

✅ Step 2: Publish the Configuration (optional)

✅ Step 3: Create a Controller for the DataTable Logic

✅ Step 4: Create a Route

✅ Step 5: Set Up the Blade View