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

Posted 2023-05-09

【中文标题】带有 Moment.js 的 Jquery 数据表的终极日期/时间排序插件

【英文标题】：Ultimate Date/Time Sorting Plugin For Jquery Datatables with Moment.js

【发布时间】：2018-07-08 15:00:57

【问题描述】：

我正在尝试按日期时间对我的 jquery dataTable 中的特定列进行排序，但遇到了一些麻烦。我包含了 moment.js 和 datetime-moment.js 库并初始化了我的格式，但它仍然没有正确排序。它似乎是按字符串而不是日期时间排序的。我的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 文档后正确地格式化了日期，但这里是网站的视图，让您了解我所针对的格式。我特别尝试按日期时间制作“开始时间”列格式，并且理想情况下也可以在“估计的解决时间”中执行此操作。

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

【参考方案1】：

我发现我需要以不同的方式格式化我的 columnDefs 才能使排序真正起作用。正确的代码如下：

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;
                    
                

【参考方案2】：

看来您的时间格式有误。从您的示例中很难完全分辨出来，但是小时数是个位数，不确定分钟数。您的 AM/PM 为大写。根据您的会议记录，您应该有：

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

或

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

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

【讨论】：

我尝试了这两种格式，但都没有正确排序。否则代码对我来说可能是其他东西吗？

我又看了一遍文档，你说得对，应该是 h:mm:ss A