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.

Answer 1

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.

Answer 2

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)