Default sorting is not working in yajra laravel datatables

Question

I'm currently utilizing the package for server-side rendering. However, I've encountered an issue with the ordering and sorting functionality. The data retrieved from the database is displayed in the datatable exactly as it is, and when I click on the header arrows or add "order:[[0, 'asc']]" to the datatable configuration, there is no change in the sorting behavior.

my backend logic:

$filter = 'bankStatement_amount > 100'
$query = BankStatement::whereRaw($filter);
 return Datatables::of($query)
            ->addColumn('action', function ($statement) {
                
                return '<input id="bs_id_' . $statement->bankStatement_id . '" name="bs_id_' . $statement->bankStatement_id . '" type="hidden" value="' . $statement->bankStatement_id . '" />
                <a class="btn btn-sm btn-icon btn-bg-light btn-icon-danger" onclick="loadJsComp('.$statement->bankStatement_id.')" href="#"><i class="flaticon-eye text-info"></i></a>
                ';
            })
             ->addColumn('bankStatement_dateVal', function ($statement) {
                 return date('d-M-Y', strtotime($statement->bankStatement_dateVal));
             })

             ->addColumn('bankStatement_amount', function($statement) {
                 return $this->formatAmount($statement->bankStatement_amount);
             })
             ->addColumn('bankStatement_resp', function($statement) {
                 return $statement->bankStatement_resp;
             })
             ->addcolumn('bankStatement_desc_azurreo', function($statement) {
                 return nl2br($statement->bankStatement_desc_azurreo);
             })
             ->addcolumn('bankStatement_account', function($statement) {
                 return $statement->bankStatement_account;
             })
             ->addcolumn('bankStatement_ref', function($statement) {
                 return $statement->bankStatement_ref;
             })->addcolumn('bankStatement_id', function($statement) {
                 return $statement->bankStatement_id;
             })
            ->toJson();

My front end logic :

 let dataTable = $('#bankStatementList').DataTable({
                processing: true,
                serverSide: true,
                "order": [[0, 'desc']],
                columnDefs: [
                    {"width": "14%", "targets": 6},
                    {"width": "11%", "targets": 4},
                    {"width": "14%", "targets": 0},
                ],
                ajax: {
                    url: "{{ route('getReconciliationsList') }}",
                    data: function (d) {
                        // d.search = $('#search').val();
                        d.reconYear = $('#reconYear').val();
                        d.day_month = encodeURIComponent($('#day_month').val());
                        d.bankStatement_account = encodeURIComponent($('#bankStatement_account').val());
                        d.bankStatement_resp = encodeURIComponent($('#bankStatement_resp').val());
                        d.transaction = encodeURIComponent($('#transaction').val());
                        d.bankStatement_desc_azurreo = encodeURIComponent($('#bankStatement_desc_azurreo').val());
                        d.bankStatement_ref = encodeURIComponent($('#bankStatement_ref').val());
                        d.bankStatement_status = encodeURIComponent($('#status').val());
                    }
                },
                columns: [
                    { data: 'bankStatement_dateVal', name: 'bankStatement_dateVal'},
                    { data: 'bankStatement_account', name: 'bankStatement_account', orderable: true },
                    { data: 'bankStatement_desc_azurreo', name: 'bankStatement_desc_azurreo', orderable: true },
                    { data: 'bankStatement_amount', name: 'bankStatement_amount', className: 'text-right', orderable: true },
                    { data: 'bankStatement_ref', name: 'bankStatement_ref', orderable: true },
                    { data: 'bankStatement_resp', name: 'bankStatement_resp', orderable: true },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    
                ],
            });

Operating System Win 10.

PHP Version 8.2.4

Laravel Version 8

Laravel-Datatables Version 9.21

Answer 1

As stated by the creator in the following post: GitHub Issue #2927

Using addColumn will disable that column's search & sort functionality.

However, you can use filterColumn and orderColumn and then implement the computed columns value search in SQL level.