【问题标题】:How to sort datatables with date in descending order如何按日期降序对数据表进行排序
【发布时间】:2016-10-15 07:33:02
【问题描述】:

我希望使用数据表显示记录,默认排序基于我的行之一,日期和时间按降序排列。请帮助我为此编辑 jquery 结构

【问题讨论】:

  • 您希望我们帮助编辑的 jQuery 结构在哪里?
  • 顺便说一句,据我所知,关于日期和时间排序,数据表处理排序过程的方式应该有一些限制
  • 我已经在我的项目中做到了。日期格式应为 YYYY-MM-DD。排序 *"order": [[ 3, "desc" ]] * 并隐藏 td,不显示任何内容。

标签: jquery html datatables


【解决方案1】:

最简单的方法是在该列的每个TD标签的日期前添加一个隐藏的时间戳,例如:

<td class="sorting_1">
    <span style="display:none;">1547022615</span>09/01/2019  09:30
</td>

使用默认字符串排序,时间戳会按照您想要的方式对列进行排序,并且在浏览器中呈现时不会显示。

【讨论】:

  • 嗨,琼,我试过这个方法,但它不起作用。它假定1547022615 是字符串而不是数字。有什么想法吗?
  • 对于极端情况,您只需要用零填充它,以便正确比较 unix 字符串,对吧,@Sam?
  • @mickmackusa 好主意。用零填充应该可以工作。唯一需要注意的是有一个预定的长度(即字符串的大小),但它可以工作。感谢分享!
  • 非常感谢,它运行良好,干杯!
  • 不添加新字段,而是在现有日期字段中添加:&lt;td data-sort="@item.Created.ToString("yyyyMMddHHmmssffff")"&gt;
【解决方案2】:

我有同样的问题。我使用 date-eu 排序插件以 DD/MM/YY 格式对日期进行排序,并包含以下 JS 文件:

<script src="//cdn.datatables.net/plug-ins/1.10.11/sorting/date-eu.js" type="text/javascript"></script>

这对我有用。

$('#exemple').DataTable({
    "order": [[ 3, "desc" ]], //or asc 
    "columnDefs" : [{"targets":3, "type":"date-eu"}],
});

另请阅读有关 stackoverflow 的这篇文章:Sorting date in datatable

【讨论】:

    【解决方案3】:

    我得到了日期排序的解决方案。只需将类型添加为“日期”并在目标中,您已通过数据表选项传递列号(计数从 0 开始)。并使用列号和格式类型设置“顺序”。见下面代码,

    columnDefs: [ { type: 'date', 'targets': [4] } ],
    order: [[ 4, 'desc' ]]
    

    【讨论】:

    • 也可以直接在列中使用。 columns: [ { "data": "MyDateField", "type":"date" } ]
    • 你能用这个解决方案定义你的日期格式吗?例如。 'dd-mm-yyyy'。
    【解决方案4】:

    请参考此笔:https://codepen.io/arnulfolg/pen/MebVgx

    它使用 //cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js 和 //cdn.datatables.net/plug-ins/1.10.12/sorting/datetime -moment.js 用于排序数据表

    默认情况下对表格进行排序:

    $.fn.dataTable.moment('DD/MM/YY');
    $('#example').DataTable({ 
           "order": [[ 3, "desc" ]] 
        }); 
    

    【讨论】:

      【解决方案5】:

      只需在{ "data": "MyDateField", "type":"date" }等列中直接添加"type":"date"即可。

      【讨论】:

        【解决方案6】:
        <td class="sorting_1">
            <span style="display:none;">201909010930</span>09/01/2019  09:30
        </td>
        

        以 yyyyMMddHHmm 格式化您的日期。这将是您的可排序时间戳。然后使用 display none 隐藏格式化的日期。这其实是对joan16v答案的进一步解释

        【讨论】:

          【解决方案7】:

          我知道这是一个旧线程。但你基本上可以使用 "aaSorting"

          $('#exemple').DataTable({
          
              "aaSorting": [[3,'desc']],
          });
          

          【讨论】:

          • order: [[ 3, 'desc' ]] 自 DataTables v1.10 起。
          【解决方案8】:

          //在这里工作代码

          $('#table').DataTable({
             columnDefs: [ { type: 'date', 'targets': [3] } ],
             order: [[ 3, 'desc' ]],          
          });
          

          【讨论】:

            【解决方案9】:

            这就是我的答案:

            <td data-order=<fmt:formatDate pattern = "yyyy-MM-dd" value = "${myObject.myDate}" />>${myObject.myDate}</td>
            

            更多详情,请参见 html5 部分:https://datatables.net/manual/data/

            【讨论】:

            • 这个我也用过,解决方法是按数据顺序将日期时间字符串设置为yyyy-MM-dd。谢谢!
            【解决方案10】:

            我可以实现的完美解决方案是:

            1. 如果您在 PHP 文件中使用 AJAX 生成数据,只需按以下方式添加日期:
            $rows[] =
                [
                "name" => $name,
                "date" => [
                    "display" => $date, // Ex: '31.12.2020'
                    "timestamp" => strtotime($date),    // Timestamp value for ordering, Ex: 1609372800
                ]
            ]
            
            1. 然后行将像这样输出到 JSON:
            {
            "name": "Vasya Pupkin",
            "date": {
                    "display": "31.12.2020",
                    "timestamp": "1609372800"
                },
            }
            
            1. 通过编辑您的 JavaScript TadaTables 对象“日期”列来完成,如下所示:
            {
                "data": "date",
                render: {
                    _: 'display',
                    sort: 'timestamp'
                }
            },
            
            1. 就是这样!现在带有日期的列已完美排序。

            【讨论】:

              【解决方案11】:

              这个问题已经很老了,答案中提到的大多数插件都已被弃用或停止工作(我都试过了)。

              这是目前有效的。

              添加扩展:

              $.fn.dataTable.ext.order['date-time'] = function (settings, col) {
                  return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
                      var val = $(td).text().trim();    // Get datetime string from <td>
                      return moment(val, "DD/MM/YYYY hh:mm:ss a").format("X"); 
                  });
              }
              

              然后,对于您的数据表:

              $('#example').DataTable({
                  "columns": [
                      null,
                      null,
                      null,
                      { "orderDataType": "date-time" }, // date-time is a custom key created in the above ext
                      null,
                      null,
                      null,
                      null,
                      null,
                      null
                   ]
              });
              

              更新: 您可以使用以下方法简化上述内容:

              $('#example').DataTable({
                  "columnDefs": [
                      { "orderDataType": "date-time", "targets": [3] }
                  ]
              });
              

              "targets": [] 数组可以包含要应用日期时间排序的所有列的索引(来自)。

              注意:我使用了moment.js,您可以使用任何其他方法来创建有效的日期/日期时间对象。另外,使用的参考是dom-sort插件,因此,同样的方法也可以用于对具有复杂dom结构的列进行排序。

              参考:https://datatables.net/examples/plug-ins/dom_sort

              【讨论】:

                【解决方案12】:

                试试这个,它对我有用

                <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.21/sorting/datetime-moment.js"></script>
                <script>
                    $(document).ready(function () {
                        $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );
                        $('#example').DataTable({"order": [[ 3, "desc" ]]});
                    });
                </script>
                

                【讨论】:

                  【解决方案13】:
                              Here the code:
                  
                  
                             jQuery.extend(jQuery.fn.dataTableExt.oSort, {
                               "date-uk-pre": function ( a ) {
                                var ukDatea = a.split('-');
                                return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
                             },
                  
                  
                              "date-uk-asc": function ( a, b ) {
                                  return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                               },
                  
                              "date-uk-desc": function ( a, b ) {
                                 return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                                }
                              }); 
                  

                  【讨论】:

                    【解决方案14】:

                    如前所述,date-eu.js 库可以工作,但对我来说,它需要对代码进行修改:

                    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
                    "date-eu-pre": function ( date ) {
                        date = date.replace(" ", "");
                    
                        if ( !date ) {
                            return 0;
                        }
                    
                        var year;
                        var eu_date = date.split(/[\.\-\/]/);
                    
                    
                        if((eu_date[0] == undefined) || (eu_date[1] == undefined) || (eu_date[2] == undefined) ){
                            eu_date[0] = 0;
                            eu_date[1] = 0;
                            eu_date[2] = 0;
                        }
                    
                        //console.log(eu_date);
                    
                        /*year (optional)*/
                        if ( eu_date[2] ) {
                            year = eu_date[2];
                        }
                        else {
                            year = 0;
                        }
                    
                        /*month*/
                        var month = eu_date[1];
                        if ( month.length == 1 ) {
                            month = 0+month;
                        }
                    
                        /*day*/
                        var day = eu_date[0];
                        if ( day.length == 1 ) {
                            day = 0+day;
                        }
                    
                        return (year + month + day) * 1;
                    },
                    
                    "date-eu-asc": function ( a, b ) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },
                    
                    "date-eu-desc": function ( a, b ) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    }
                    

                    });

                    【讨论】:

                      【解决方案15】:

                      这对我有用。不要忘记在您的代码中添加时刻。我正在使用节点,所以这是我的导入。

                      npm i 时刻 -S

                      从“时刻”导入时刻;

                      $('#example').DataTable({
                          "order": [[ 3, "desc" ]], //or asc 
                          "columnDefs" : [
                             {
                                targets: [3],
                                render: function (data, type) {
                                   if (data !== null) {
                                      var wrapper = moment(new Date(data));
                                      return wrapper.format("MM/DD/YYYY h:mm:ss A");
                                   }
                                }
                             }
                          ],
                      });
                      

                      所有功劳归功于 Ryan Besko。在这里找到答案:https://forums.asp.net/t/2154454.aspx?DataTables+Date+Time+sorting+DD+MM+YYYY+HH+mm+a

                      【讨论】:

                      • 请注意 Moment.js 现在是 legacy project 并且不再接收更新。
                      【解决方案16】:

                      您可以通过在记录中添加数据集属性来进行排序。详情点击here

                      示例::

                      <td data-search="21st November 2016 21/11/2016" data-order="1479686400">
                          21st November 2016
                      </td>
                      

                      为了显示从初始状态排序的数据,定义一个列来查找排序。例如::

                      $('#dataTable').DataTable({
                          "order": [[10, 'desc']],
                      });
                      

                      谢谢,

                      快乐编码:)

                      【讨论】:

                        【解决方案17】:

                        数据表中的默认排序:

                        $(document).ready(function() { 
                            $('#example').DataTable({ 
                                "order": [[ 3, "desc" ]] 
                            }); 
                        });
                        

                        您可以使用 asc 进行升序。 3 表示,第 4 列将被默认排序。

                        【讨论】:

                        • 我用过这个。它适用于正常数据。它不适用于日期
                        猜你喜欢
                        • 2013-01-10
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        • 1970-01-01
                        相关资源
                        最近更新 更多