How to use Yajra Datatables in Laravel 11

Using Yajra Datatables in Laravel 11 allows you to create dynamic, feature-rich data tables with ease. Yajra Datatables is a Laravel package that provides server-side processing for displaying tabular data. It simplifies the process of creating interactive data tables by handling pagination, sorting, and filtering on the server side.

Here’s a step-by-step guide on how to use Yajra Datatables in Laravel 11:

  1. Install Yajra Datatables Package: Begin by installing the Yajra Datatables package via Composer. Open your terminal and navigate to your Laravel project directory. Then, run the following Composer command:
composer require yajra/laravel-datatables-oracle

This command installs the Yajra Datatables package along with its dependencies.

  1. Configure Datatables Service Provider: After installing the package, register the Datatables service provider in your Laravel application. Open your config/app.php file and add the following line to the providers array:
Yajra\DataTables\DataTablesServiceProvider::class,
  1. Publish Configuration File (Optional): You can publish the configuration file of Yajra Datatables to customize its behavior according to your requirements. Run the following Artisan command in your terminal:
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider" --tag=config

This command will create a datatables.php file in your config directory.

  1. Create Datatables Class: Next, create a new Datatables class for the model you want to display in a data table. You can generate this class using Artisan command:
php artisan make:datatable UserDataTable --model=User

This command will generate a UserDataTable class in the App\DataTables directory.

  1. Define Datatables Columns and Query: Inside the generated Datatables class (UserDataTable in this case), define the columns you want to display in the data table and specify the query to fetch the data from the database.
  2. Render Datatables in Controller: In your controller method, instantiate the Datatables class, passing the query builder or Eloquent model as a parameter. Then, return the Datatables instance as a response.
use App\DataTables\UserDataTable;

public function index()
{
    return UserDataTable::query()->toJson();
}
  1. Display Datatables in Blade View: Finally, in your Blade view, include the necessary JavaScript and HTML markup to render the Datatables.
<table id="users-table" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <!-- Additional columns here -->
        </tr>
    </thead>
</table>

<script>
$(document).ready(function() {
    $('#users-table').DataTable({
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            // Additional columns here
        ]
    });
});
</script>

Replace '{{ route('users.index') }}' with the route to your controller method that returns the Datatables data.

By following these steps, you can effectively utilize Yajra Datatables in Laravel 11 to create dynamic and interactive data tables for your web application.

Leave a Reply