Why sorting by clicking on columns in dataTable does not work?

mstdmstd

in my laravel 8 app with jquery 3.4/bootstrap 4.6 I use dataTable 1.10.19
and I need to make data sortable by some columns and I set bSortable property to true for some columns
like :

var url = "{!! route('educationsGetFilter') !!}";


oTable = $('#tzdatatables').dataTable({
    "language": {
        "emptyTable": "No educations found"
    },
    "bServerSide": true,

    "ajax": {
        "url": url,
        "data": function ( d ) {
            d.search = $('.dataTables_filter > label > input').val();
            d.category_id = $("#filter_education_category_id").val();
            d.document_type = $("#filter_document_type").val();
            d.tags = $("#filter_tags").val();
        }
    },
    "bProcessing": true,
    "aoColumns": [{
        "bSortable": true,
        "mData": 0 // Sr No
    }, {
        "sWidth": "30%",
        "bSortable": true,
        "mData": 1 // Name
    }, {
        "bSortable": true,
        "mData": 2 // Status label
    }, {
        "mData": 3 // Education category
    }, {
        "mData": 4 // $created_at_formatted
    }, {
        "mData": 5 // $updated_at_formatted
    }, {
        "mData": null,
        "bSortable": true,
        "mRender": function (data, type, full) {
            var editurl = data[6];
            var public_url = data[7];

            return '<div>\n\
        <a class="btn btn-sm btn-success btn-icon" href="' + editurl + '" title="Edit education"><i class="fas fa-edit icon-nm"></i></a>\n\
        <a data-id="' + data[0] + '" class="btn btn-sm btn-danger btn-icon delete_this mb-1" href="javascript:;" title="Delete education"><i class="fas fa-trash-alt icon-nm"></i></a>\n\
       <a class="btn btn-sm btn-info btn-icon ml-2" href="' + public_url + '" title="Open education on frontend"><i class="fas fa-external-link-alt icon-nm""></i></a>\n\
        </div>';
        }
    }]

but I see “Up”/"Down" icons with name of any columns : https://prnt.sc/1qstemm
but sorting does not work for any of columns...

What is wrong ?

Thanks!

colin

You've configured serverSide, so the ordering would need to be done by your server-side script. If you've got less than 10-20k records, then you can just remove that option and let the browser do the sorting (and paging and filtering),

Colin

mstdmstd

Thanks!
I think case if there is a way to override event when user clicks on table column header?
Maybe I can call method
oTable.fnDraw();
to trigger data retrieving from server passing as a parameter on which column user clicked?

kthorngren

Use the browser's network inspector to watch for XHR requests. Click one of the columns to sort and you will see the request sent to the server. The request will have the parameters discussed in the server side processing docs. You should also see the additional parameters you have defined with ajax.data.

With serverSide: true it is expected that your server script perform the sorting, search and paging of the table. Are you using a Datatables supplied server script? Do you need server side processing enabled (see Colin's response)?

Kevin

mstdmstd

Thanks!
Debugging requests results when user clicks on field I see:

When User clicks on first column:
[order] => Array
(
[0] => Array
(
[column] => 0
[dir] => desc
)
)

When User clicks on 2nd column:
[order] => Array
(
[0] => Array
(
[column] => 1
[dir] => asc
)
)

I can get column by number , but if there is a way to pass column name here ?
column number seems not very good...

colin

By default, it only sense the number as you say, but you can add the column name with ajax.data.

Colin