带有Moment.js的Jquery数据表的终极日期/时间排序插件

时间:2018-01-29 20:19:13

标签: jquery sorting datetime datatables momentjs

我正在尝试按日期时间对我的jquery dataTable中的特定列进行排序,但遇到了一些麻烦。我包含了moment.js和datetime-moment.js库并初始化了我的格式,但它仍然没有正确排序。它似乎是按字符串而不是datetime排序。我的javascript如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/date-dd-MMM-yyyy.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/datetime-moment.js"></script>
<link href="" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {

        $.fn.dataTable.moment('M/D/YYYY hh:mm:ss a');

        $('#netEventTable').dataTable({
            "bLengthChange": true,
            "paging": false,
            "sPaginationType": "full_numbers",
            "jQueryUI": true,
            "bLengthChange": false,
            //"aoColumnDefs": [
            //    {
            //        "aTargets": [4],
            //        "type": "date-dd-MMM-yyyy"
            //    }
            //],
            "columnDefs": [
                {"type": "datetime-moment", targets: 4}
            ],
            language: {
                paginate: {
                    first: "",
                    last: "",
                    next: "| Next",
                    previous: "Previous |"
                }
            }
        });
    });

</script>

此外,我很确定在查看Moment.js文档之后我正确地格式化了日期,但是这里有一个网站视图,可以让您了解我所针对的格式。我特意尝试按日期时间制作“开始时间”列格式,理想情况下也会在“估计分辨率时间”中执行此操作。

enter image description here

我正在关注本教程:https://datatables.net/blog/2014-12-18

2 个答案:

答案 0 :(得分:0)

看起来你的时间格式错了。很难从你的例子中完全说出来,但是小时是单位数,不确定会议记录。您的AM / PM是大写的。根据您的会议记录,您应该:

$.fn.dataTable.moment('M/D/YYYY h:m:ss A');

$.fn.dataTable.moment('M/D/YYYY h:mm:ss A');

Moment.js文档将提供有关日期和时间格式的详细信息。

答案 1 :(得分:0)

我发现我需要以不同方式格式化columnDef,以使排序实际工作。正确的代码如下:

columnDefs: 
                {
                    targets: 4,
                    render: function (data, type, full, meta) {
                        if (type == 'display') {
                            if (data) {
                                var mDate = moment(data);
                                data = (mDate && mDate.isValid()) ? mDate.format('M/D/YYYY h:mm:ss A') : '';
                            }
                        }
                        return data;
                    }
                }