DataTables datetime column sorting is not working?

Question

I have tried adding date-uk , date-eu plugin and datetime-moment but nothing seems to be working.

My date format is 08/08/2019 14:33 as in DD/MM/YYYY HH:mm . I tried adding the following line before DataTable initilization but it's not working:

$.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );

Here is the whole code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/date-euro.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>

<script>

    $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );

    // Create global variable for vms clients related variables
    ce.global.vmsClients = {};

    // Get the vmsClients table element
    var $vmsClientsTable = $('#vmsClients-table');

    // Init the data tables on the vms client table
    ce.global.vmsClients.vmsClientsTable = $vmsClientsTable.DataTable({
        ajax: {
            url: Routing.generate('admin_vms_clients_get_vms_clients'),
            type: 'POST',
            data: function (data) {
                data.customFilters = $('#vmsClients-criteria-form').serialize();
                return data;
            },
            reload: function (json) {
            }
        },
        drawCallback: function (settings) {
            vmsClients_Customize_Table();
        },
        fnInitComplete: function () {
        },
        serverSide: true,
        columns: [
            {
                data: 'id',
                render: function (data) {
                    return '<label class="selection-checkbox action">' +
                        '    <input type="checkbox" value="' + data + '" class="venues-selection-checkbox datatable-selection-checkbox">' +
                        '    <span class="checkmark"></span>' +
                        '</label>';
                },
                searchable: false,
            },
            {data: 'id'},
            {
                data: 'type',
                render: function (data) {
                    var returnVar = '';
                    if (data == 1)
                        returnVar = "Venue Admin";
                    if (data == 2)
                        returnVar = "Venue Manager";
                    return returnVar;
                },
            },
            {data: 'name'},
            {data: 'emailAddress'},
            {
                data: 'status',
                render: function (data) {
                    var returnVar = '';
                    if (data == 1)
                        returnVar = '<span class="text-yes">Yes</span>';
                    if (data == 0)
                        returnVar = '<span class="text-no">No</span>';
                    return returnVar;
                },
            },
            {data: 'lastLoginTime'},
            {data: 'createdAt'},
            {
                data: 'id',
                render: function (data) {
                    return '<a class="view-venue action" data-id="' + data + '"  href="javascript:void(0)"><img height="20" width="20" src="' + dashboardImagesDir + '/icons/view.svg"></a>';
                },
                searchable: false
            },
            {
                data: 'id',
                render: function (data) {
                    return '<a class="delete-images action" data-id="' + data + '"  href="javascript:void(0)">' +
                        '    <img height="20" width="20" src="' + dashboardImagesDir + '/icons/delete.svg">' +
                        '</a>' +
                        '<a class="edit-venue action" href="' + Routing.generate('vms_client_edit', {id: data}) + '">' +
                        '    <img height="20" width="20" src="' + dashboardImagesDir + '/icons/edit_icon.svg">' +
                        '</a>';
                },
                searchable: false
            }

        ],
        scrollX: true,
        bLengthChange: false,
        language: {
            search: "",
            paginate: {
                previous: '‹',
                next: '›'
            },
            aria: {
                paginate: {
                    previous: 'Previous',
                    next: 'Next'
                }
            },
            info: 'Total <span class="pagination-filtered-count pagination-total-count"><b>_MAX_</b></span>'
        },
        dom: '<"row"<"col-sm-3"l><"col-sm-3"f><"col-sm-6"p>>' +
            '<"row"<"col-sm-12"tr>>' +
            '<"row"<"col-sm-4"><"col-sm-8"<"row"<"col-sm-8 bottom-pagination"ip><"col-sm-4 download-enquiries">>>>'
    });
</script>

You can see that the created at column is incorrectly sorting the dates:

Answer 1

Good timing, I tried using date-euro just a few hours ago - it doesn't seem to like dates in the <TD> wrapped in any html at all - I ended up rewriting date-euro plugin

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "date-euro-pre": function (a) {
        var x;

        if ($.trim(a) !== '') {
            if (a[0] === '<') {
                var d = document.createElement('div');
                d.innerHTML = a;
                a = d.textContent;
            }
            var frDatea = $.trim(a).split(' ');
            var frTimea = (undefined != frDatea[1]) ? frDatea[1].split(':') : [00, 00, 00];
            var frDatea2 = frDatea[0].split('/');
            x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + ((undefined != frTimea[2]) ? frTimea[2] : 0)) * 1;
        } else {
            x = Infinity;
        }
        return x;
    },

    "date-euro-asc": function (a, b) {
        return a - b;
    },

    "date-euro-desc": function (a, b) {
        return b - a;
    }
});

Works for me, but your mileage may vary

The only change is that the pre code checks if the date is wrapped in other HTML, it's very simplistic, but works for MY needs

A more sophisticated check could be done, or even no check at all, just run the code without checking if (a[0] === '<') , but I have not tested that scenario - I needed a quick fix, and this did it