Sort icon not changing in Datatable server side processing

Question

When I use server side processing in datatable the sorting works but the sort icon does not change and stays in same direction. Below is the code snippet of my datatable configuration.

$('#dtSearchResult').DataTable({
                    "filter": false,
                    "pagingType": "simple_numbers",
                    "orderClasses": false,
                    "order": [[0, "asc"]],
                    "info": true,
                    "scrollY": "450px",
                    "scrollCollapse": true,
                    "bLengthChange": false,
                    "searching": true,
                    "bStateSave": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": VMCreateExtraction.AppSecurity.websiteNode() + "/api/Collection/SearchCustIndividual",
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        aoData.push({ "name": "ccUid", "value": ccUid });
                       //Below i am getting the echo that i will be sending to Server side
                        var echo = null;
                        for (var i = 0; i < aoData.length; i++) {
                            switch (aoData[i].name) {
                                case 'sEcho':
                                    echo = aoData[i].value;
                                    break;
                                default:
                                    break;
                            }
                        }
                        $.ajax({
                            "dataType": 'json',
                            "contentType": "application/json; charset=utf-8",
                            "type": "GET",
                            "url": sSource,
                            "data": aoData,
                            success: function (msg, a, b) {
                                $.unblockUI();

                                var mappedCusNames = $.map(msg.Table, function (Item) {
                                    return new searchGridListObj(Item);
                                });
                                var data = {
                                    "draw": echo,
                                    "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS,
                                    "recordsFiltered": msg.Table1[0].FILTERED_RECORDS,
                                    "data": mappedCusNames
                                };
                                fnCallback(data);
                                $("#dtSearchResult").show();
                                ko.cleanNode($('#dtSearchResult')[0]);
                                ko.applyBindings(VMCreateExtraction, $('#dtSearchResult')[0]);
                            }
                        })
                    },
                    "aoColumns": [{
                        "mDataProp": "C_UID"
                    }, {
                        "mDataProp": "C_LAST_NAME"
                    }, {
                        "mDataProp": "C_FIRST_NAME"
                    }, {
                        "mDataProp": "C_USER_ID"
                    }, {
                        "mDataProp": "C_EMAIL"
                    }, {
                        "mDataProp": "C_COMPANY"
                    }],
                    "aoColumnDefs": [{ "defaultContent": "", "targets": "_all" },
                //I create a link in 1 st column
                    ]
                });

There is some configuration that I am missing here. I read on datatable forums and the only issue highlighted by people was that draw should be same as what we send on server side.

Can you see if the server code returns the correct data? You may need to look at the " success: function (msg, a, b) " of the code. — Tianyun Ling
– Tianyun Ling, Commented May 12, 2016 at 15:38
msg is the jsonResult returned from DB and it is correct. I create the data for fnCallback using this line above var data = { "draw": echo, "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS, "recordsFiltered": msg.Table1[0].FILTERED_RECORDS, "data": mappedCusNames }; — Aashish Kumar
– Aashish Kumar, Commented May 12, 2016 at 16:08
Been there done that...already did that fix in the code.. but to no avail. — Aashish Kumar
– Aashish Kumar, Commented May 12, 2016 at 17:27

Aashish Kumar · Accepted Answer · 2016-09-06 13:28:41Z

For anyone looking for an answer to this. Sad but i had to write my own function as below:

function sortIconHandler(thArray, sortCol, sortDir) {
        for (i = 0; i < thArray.length; i++) {
            if (thArray[i].classList.contains('sorting_asc')) {
                thArray[i].classList.remove('sorting_asc');
                thArray[i].classList.add("sorting");
            }
            else if (thArray[i].classList.contains('sorting_desc')) {
                thArray[i].classList.remove('sorting_desc');
                thArray[i].classList.add("sorting");
            }
            if (i == sortCol) {
                if (sortDir == 'asc') {
                    thArray[i].classList.remove('sorting');
                    thArray[i].classList.add("sorting_asc");
                }
                else {
                    thArray[i].classList.remove('sorting');
                    thArray[i].classList.add("sorting_desc");
                }
            }
        }
    }

tharrray-> The array of all row headers(You can just write a jquery selector for this).

sortCol->Column on which sort is clicked (Datatable param iSortCol_0)

sortDir -> Sorting direction (Datatable param sSortDir_0)

bad_coder · Accepted Answer · 2021-10-02 02:39:13Z

0

I know this is an old thread, but make sure you don't have an .off() somewhere associated with the tables capture group in jQuery. I had a click event that (for some reason) I attached an off function to.. Took me 3 days to find it.

edited Oct 2, 2021 at 2:39

bad_coder

13.2k20 gold badges59 silver badges95 bronze badges

answered Oct 1, 2021 at 23:25

HawtDogFlvrWtr

1

Collectives™ on Stack Overflow

Sort icon not changing in Datatable server side processing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related