Datatable - Sorting not working and icon are not coming

sarvaiyaprashant

please help me in this. I have tried my level best to for SORTING to work. Whenever any column header is clicked, I goes to server side but all the values comes as NULL e.g. start, length, draw, sortColum. this is happening when clicked on header only. Pagination is working fine.

Any help is appreciated.

Client side code

var dataTable = $('#SettlementTable').DataTable({
    "processing": true, // for show progress bar
    "serverSide": true, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    destroy: true,
    "language": {
        "zeroRecords": "<center>No record(s) found !</center>"
    },
    "ajax": {
        "url": "http://localhost/Payments.Productization.GlobalPaymentUI/Home/LoadData",
        "type": "POST",
        "datatype": "json",
        "data": function (d) {
            d.region = $("#region").val();
            d.country = $("#country").val();
            d.paymentType = $("#paymentType").val();
            d.searchGroup = $("#SearchGroup").val();
            d.searchValue = $("#txtSearch").val();
        },
        dataSrc: function (response) {
            if (response.status === "success") {
                $("#seachResult").show();
                return response.data;
            } else {
                $("#SettlementTable_processing").hide();
                showErrorMessage(response.error);
                return null;
            }
        }
    },
    "columns": [
        {
            "class": "details-control",
            "data": null,
            "orderable": false,
            "defaultContent": ""
        },
        { "data": "country", "orderable": true },
        { "data": "boNumber", "orderable": true },
        { "data": "foNumber", "orderable": true},
        { "data": "dpid", "orderable": true},
        { "data": "customer", "orderable": true},
        { "data": "totalAmount", "orderable": true },
        { "data": "invoiceNumber", "orderable": true},
        { "data": "creditMemo", "orderable": true },
        { "data": "orderStatus", "orderable": true },
        { "data": "orderDate", "orderable": true }
    ],
    "order": [[3, "desc"]]
});

Server SideCode

var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
// Skiping number of Rows count
var start = Request.Form["start"].FirstOrDefault();
// Paging Length 10,20
var length = Request.Form["length"].FirstOrDefault();
// Sort Column Name
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
// Sort Column Direction ( asc ,desc)
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
// Search Value from (Search box)
var searchValue = Request.Form["search[value]"].FirstOrDefault();

bindrid

Do you have server side code that populates those values? DataTables is a client side tool so its up to you to populate the data server side.

Unless you are returning lots and lots of data, set server side to false.

sarvaiyaprashant

Of course, I have server side code and that rendering the 100s of records. Searching. Pagination and all working fine with the records.

But when clicked on Heading, it doesn't post the values to the server. E.g. Start, length, Column clicked etc.

colin

Hi @sarvaiyaprashant ,

As @bindrid said, it's the responsibility of the server to return the ordered data - it would've been sent the ordering information like this:

order[0][column]: 2
order[0][dir]: asc

This is working as expected here.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin