Sorting order breaks when using .row.add(object) on client side data processing

ul1sses

Sorting order breaks when using .row.add(object) on client side data processing.

On the first load ordering works normally. But on the second and after, it does not.

For example: "Column F" it's monetary value. "colFF" it's formatted, "colF" is not.

Obs: there is no console message or error.

Create Datatables instance without any data:

const defaultDatatablesCfg = {
    "columns": [
        {"data": "id"},
        {"title": "Column A",  "data": null, "render": {_: "colAF", sort: "colA"}},
        {"title": "Column B", "data": null, "render": {_: "colBF", sort: "colB"}},
        {"title": "Column C", "data": "colC"},
        {"title": "Column D", "data": "colD"},
        {"title": "Column E", "data": "colE"},
        {"title": "Column F", "data": null, "render": {_: "colFF", sort: "colF"}},
        {"title": "Column G", "data": "colG"},
        {"title": "Column H", "data": "colH"}
    ],
    "columnDefs": [
        {targets: 0, visible: false, searchable: false},
        {targets: [1, 2, 4, 5, 7, 8], className: "dt-body-center"},
        {targets: 6, className: "dt-body-right"}
    ],
    "searching": false,
    "processing": false,
    "serverSide": false,
    "paging": true,
    "pageLength": 20,
    "lengthChange": false,
    "info": false,
    "ordering": true,
    "order": [[ 0, "asc" ]],
    "aaSorting": [],
    "orderMulti": false
};

let tbDT = $("#tableResult").DataTable(defaultDatatablesCfg);

Manually processing ajax return data with JQuery:

$(response.responseData).each(function (idx,obj) {
    tbDT.row.add(obj);
});

tbDT.draw();

kthorngren

Without seeing the data you have its difficult to guess what the problem is. Please post a link to your page or a test case sowing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ul1sses

Like this? live.datatables.net/supeyiwe/2/edit?html,js,output

kthorngren

Like this?

I guess so. You have 10 pages of data then rows.add() adds another 10 pages. You are sorting by column 0 (the index column). Can you provide details of what to look for to see the issue?

EDIT: One suggestion if you can replicate the issue with few rows that would make it easier for us to help.

Kevin

ul1sses

I'm feeling so dumb right now...

You are sorting by column 0 (the index column)

I forgot to remove this setting from datatables config.

Sorry for wasting your time.

kthorngren

I forgot to remove this setting from datatables config.
Sorry for wasting your time.

No problem, glad you got it worked out

Kevin

ul1sses

After some time testing, i verified that the problem was not solved.

Using the command "dt.column(6).cache()", i noticed that the sort cache had only numeric values ​​in the first load (correct), but after executing the next loads, the cache had string values (quoted numeric values) mixed with the numeric ones. I don't understand why this is happening because the returned json structure is the same on every ajax call.

The only real solution i found was to set the column type as "num":

"columnDefs": [
        {targets: 6, type: "num"}
 ]