Sorting using data-order on epoch time is wrong on most browsers

Sorting using data-order on epoch time is wrong on most browsers

adieadie Posts: 2Questions: 1Answers: 0
edited March 2017 in Free community support

I have a weird situation that has never happened before, the order is incorrect on the latest Chrome installed on windows machines and mobiles browsers but it's correctly ordered on Chrome on MacOS Sierra. I use data-order with epoch time to order the column descendingly. Any idea what might cause this issue? PS: I cleared every and any cache, no help

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin

    Happy to take a look if you post a link to a test case. The epoch is just an integer, so there really shouldn't be any issue with the sorting element. More likely it isn't detecting that it should be sorting on that data point for whatever reason.

    Allan

  • adieadie Posts: 2Questions: 1Answers: 0
    edited March 2017

    Thanks for the reply Allan. I kinda figured out the issue. Seems like it was sorting by the date string instead of the epoch time data-order attribute. The order results were different on multiple browsers because of the system locale settings.

    $('#bucketContents').DataTable({
            "order": [[1, 'desc']],
            "info": true,
            "autoWidth": true,
            "search": {
                "smart": true,
                "caseInsensitive": true
            },
            "lengthMenu": [10, 20, 40, 60, 80, 100],
            "pagingType": "simple",
            "ajax": {
                "url": config.fetchFiles,
                "type": "GET",
                "dataSrc": function (data) {
                    return data.data;
                }
            },
            "columns": [{
                "data": "fileName",
                "sortable": false,
                "render": function (data, type, row) {
                    return '<div class="datatable-file-name">' + row.fileName + '</div>';
                }
            }, {
                "sortable": true,
                "orderable": true,
                "data": "lastModified",
                "render": function (data, type, row) {
                    var DateTime = new Date(parseInt(row.lastModified)).toLocaleString();
                    return '<div data-order="' + row.lastModified + '" class="datatable-file-name">' + DateTime + '</div>';
                }
            }, {
                "data": "status",
                "sortable": false,
                "render": function (data, type, row) {
                    return '<div class="datatable-file-name">' + row.status + '</div>';
                }
            }, {
                "searchable": false,
                "sortable": false,
                "render": function (data, type, row) {
                    var msgstates = ['fail', 'busy'];
                    var playstates = ['ready', 'done'];
                    if (playstates.indexOf(row.status) > -1) {
                        return '<button class="playVideo" data-videoname="' + row.fileName + '">Open</button></div></div>';
                    }
                    if (msgstates.indexOf(row.status) > -1) {
                        return '<pre>' + row.message + '</pre>';
                    }
                    return '<div></div>';
                },
                "targets": 0
            }]
        });
    
  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin
    Answer ✓

    If you are using columns.render as a function, what you return from it (when the type is sort) is what DataTables will use for the ordering data. In this case it is an HTML string - hence the issue.

    You want to return only row.lastModified under those conditions.

    See the orthogonal data section for more details.

    Regards,
    Allan

This discussion has been closed.