DataTables datetime列排序不起作用?

问题描述 投票:0回答:1

我尝试添加date-ukdate-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>

您会看到在at列创建的日期不正确:enter image description here

javascript datatable datatables
1个回答
0
投票

很好的时机,我只是在几个小时前尝试使用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] === '<'),但是我还没有测试过这种情况-我需要快速修复,并且做到了]]

© www.soinside.com 2019 - 2024. All rights reserved.