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

adie

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

allan

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

adie

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
        }]
    });

allan

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