Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How do I integrate Yajra DataTables with Laravel 11


How do I integrate Yajra DataTables with Laravel 11


Here is how you can integrate the Yajra DataTables package with a Laravel 11 application:

1. Install the Yajra DataTables Package: First, install the Yajra DataTables package using Composer:


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

2. Configure the Package: If you are using Laravel 5.5 or higher, the package will auto-discover the service provider, so you don't need to manually register it. However, if you are using an older version of Laravel, you'll need to add the service provider to your `config/app.php` file:

php
'providers' => [
    // ...
    Yajra\DataTables\DataTablesServiceProvider::class,
],

3. Publish the Configuration and Assets: Next, publish the package's configuration and assets using the following command:


php artisan vendor:publish --tag=datatables

This will create a `config/datatables.php` file that you can customize if needed.

4. Create a DataTable Class: Generate a new DataTable class using the following Artisan command:


php artisan make:datatable UsersDataTable

This will create a `UsersDataTable` class in the `app/DataTables` directory. You can customize this class to define the columns, actions, and other options for your DataTable.

5. Integrate the DataTable in a Controller: In your controller, you can use the DataTable class to render the DataTable in a view:

php
namespace App\Http\Controllers;

use App\DataTables\UsersDataTable;

class UsersController extends Controller
{
    public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('users.index');
    }
}

6. Create the View: In your `resources/views/users/index.blade.php` file, you can include the DataTable HTML and JavaScript:

html
<table class="table table-bordered data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created At</th>
            <th>Updated At</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@push('scripts')
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
</script><script>
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('users.index') }}",
            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'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });
    });
</script>
@endpush

This will set up the DataTable in your view and connect it to the controller action.

By following these steps, you should be able to integrate the Yajra DataTables package into your Laravel 11 application. The package provides a powerful and flexible way to add advanced data table functionality to your application.

Citations:
[1] https://www.elegantlaravel.com/article/yajra-datatables-integration-in-laravel-step-by-step-guide
[2] https://www.youtube.com/watch?v=fQDulbC3Smc
[3] https://www.itsolutionstuff.com/post/how-to-use-yajra-datatables-in-laravel-6example.html
[4] https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter
[5] https://yajrabox.com/docs/laravel-datatables/10.0