如何按日期降序对数据表进行排序

Posted 2023-05-07

【中文标题】如何按日期降序对数据表进行排序

【英文标题】：How to sort datatables with date in descending order

【发布时间】：2016-10-15 07:33:02

【问题描述】：

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

【问题讨论】：

您希望我们帮助编辑的 jQuery 结构在哪里？

顺便说一句，据我所知，关于日期和时间排序，数据表处理排序过程的方式应该有一些限制

我已经在我的项目中做到了。日期格式应为 YYYY-MM-DD。排序 *"order": [[ 3, "desc" ]] * 并隐藏 td，不显示任何内容。

【参考方案1】：

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

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

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

【讨论】：

嗨，琼，我试过这个方法，但它不起作用。它假定1547022615 是字符串而不是数字。有什么想法吗？

对于极端情况，您只需要用零填充它，以便正确比较 unix 字符串，对吧，@Sam？

@mickmackusa 好主意。用零填充应该可以工作。唯一需要注意的是有一个预定的长度（即字符串的大小），但它可以工作。感谢分享！

非常感谢，它运行良好，干杯！

不添加新字段，而是在现有日期字段中添加：<td data-sort="@item.Created.ToString("yyyyMMddHHmmssffff")">

【参考方案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"],
);

另请阅读有关 *** 的这篇文章：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】：

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

如果您在 php 文件中使用 AJAX 生成数据，只需按以下方式添加日期：

$rows[] =
    [
    "name" => $name,
    "date" => [
        "display" => $date, // Ex: '31.12.2020'
        "timestamp" => strtotime($date),    // Timestamp value for ordering, Ex: 1609372800
    ]
]

然后行将像这样输出到 JSON：

"name": "Vasya Pupkin",
"date": 
        "display": "31.12.2020",
        "timestamp": "1609372800"
    ,

通过编辑您的 JavaScript TadaTables 对象“日期”列来完成，如下所示：

    "data": "date",
    render: 
        _: 'display',
        sort: 'timestamp'
    
,

就是这样！现在带有日期的列已完美排序。

【参考方案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 列将被默认排序。

【讨论】：

我用过这个。它适用于正常数据。它不适用于日期