Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How can I implement server-side sorting in Yajra DataTables for Laravel 11


How can I implement server-side sorting in Yajra DataTables for Laravel 11


To implement server-side sorting in Yajra DataTables for Laravel 11, you can follow these steps:

1. Modify the DataTable Class:
In your DataTable class (e.g., `UsersDataTable`), you can override the `orderColumn()` method to define how the sorting should be handled on the server-side. Here's an example:

php
public function orderColumn($column, $order)
{
    switch ($column) {
        case 'name':
            return ['users.name', $order];
        case 'email':
            return ['users.email', $order];
        default:
            return ['users.id', $order];
    }
}

In this example, we're mapping the column names to the corresponding database columns for sorting. You can add more cases as needed for your specific columns.

2. Modify the Controller:
In your controller, you can use the DataTable class to handle the sorting request:

php
public function index(UsersDataTable $dataTable)
{
    return $dataTable->render('users.index');
}

3. Update the View:
In your view, you can add the sorting functionality to the DataTable:

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>
    $(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},
            ],
            order: [[1, 'asc']] // Set the initial sorting order
        });
    });
</script>
@endpush

In this example, we're setting the initial sorting order to sort by the "Name" column in ascending order.

By following these steps, you should be able to implement server-side sorting in Yajra DataTables for your Laravel 11 application. The package provides a flexible API for handling sorting and other advanced DataTable features.

Citations:
[1] https://itcodstuff.com/blog/laravel-yajra-datatables-tutorial/
[2] https://datatables.net/forums/discussion/75467/how-to-use-sorting-on-server-side
[3] https://www.youtube.com/watch?v=fQDulbC3Smc
[4] https://www.binaryboxtuts.com/php-tutorials/laravel-tutorials/laravel-11-crud-using-ajax-with-datatables-tutorial/
[5] https://www.itsolutionstuff.com/post/how-to-use-yajra-datatables-in-laravel-6example.html