DataTables 日期時間列排序不起作用？

Question

我嘗試添加date-uk 、 date-eu插件和datetime-moment但似乎沒有任何效果。

我的日期格式是08/08/2019 14:33 ，如DD/MM/YYYY HH:mm 。 我嘗試在 DataTable 初始化之前添加以下行，但它不起作用：

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

這是整個代碼：

<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>

您可以看到 created at 列對日期的排序不正確：

Answer 1

好時機，我在幾個小時前嘗試使用 date-euro - 它似乎根本不喜歡包含在任何 html 中的<TD>中的日期 - 我最終重寫了 date-euro 插件

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

對我有用，但你的里程可能會有所不同

唯一的變化是pre代碼檢查日期是否包含在其他 HTML 中，這非常簡單，但可以滿足我的需要

可以進行更復雜的檢查，甚至根本不檢查，只需運行代碼而不檢查if (a[0] === '<') ，但我沒有測試過這種情況 - 我需要快速修復，並且這做到了