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

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

ul1ssesul1sses Posts: 6Questions: 1Answers: 0

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();

Replies

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2020

    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

  • ul1ssesul1sses Posts: 6Questions: 1Answers: 0
    edited September 2020

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    No problem, glad you got it worked out :smile:

    Kevin

  • ul1ssesul1sses Posts: 6Questions: 1Answers: 0
    edited September 2020

    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"}
     ]
    
This discussion has been closed.