DataTables - 如何按日期排序 (dd.mm.yyyy)答案

【问题标题】：DataTables - How to sort by date (dd.mm.yyyy)DataTables - 如何按日期排序 (dd.mm.yyyy)
【发布时间】：2021-06-28 07:55:28
【问题描述】：

我有一个包含多列的表。 1 列包含格式为 dd.mm.yyyy 的日期（例如：26.05.2021）。我正在尝试按日期实现默认排序。

我的桌子是这样的：

<table id="myTable" class="table table-striped table-hover" style="width:100%">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some Text.</td>
                    <td>25.06.2021</td> <!-- This is the date column I want to sort by -->
                    <td>15:10</td>
                    <td>Some Text 2</td>
                </tr>
                <tr>
                    <td>Some Text</td>
                    <td>22.07.2020</td> <!-- This is the date column I want to sort by -->
                    <td>16:00</td>
                    <td>Some Text XYZ</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Notes</th>
                </tr>
            </tfoot>
        </table>

到目前为止，我在我的 HTML 文件中的 <body> 末尾有这个 JS：

<script type="text/javascript" href="https://cdn.datatables.net/plug-ins/1.10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
        $('#myTable').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.18/i18n/Slovak.json"
            },
            columnDefs: [{
                type: 'date-eu',
                targets: 1
            }],
            "order": [
                [1, "desc"],
                [2, "desc"]
            ],
            "pagingType": "first_last_numbers"
        });
</script>

问题是，这不能正确排序表格。它似乎只按天排序（忽略月份和年份），而不是整个日期。

任何想法如何进行？我已经尝试了在这里以及 DataTables 论坛上可以找到的所有可用答案，但没有任何答案可以解决我的问题...

谢谢

【问题讨论】：

标签： javascript date datatable datatables

【解决方案1】：

因为您的表格中有两种不同的日期/时间格式（一种用于第 2 列日期，另一种用于第 3 列时间），我建议使用ultimate date/time sorting plug-in。

您需要在页眉中添加这些额外资源：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>

然后，在正文脚本中，你可以定义你需要的两种格式：

$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );

这两个字符串的格式选项记录在 here 作为 moment.js 库的一部分。

DataTables 负责其余的工作。

它会查看您提供的日期/时间格式列表，并自动将正确格式与相关列数据相匹配。然后它使用该格式来确保数据按时间顺序排序，同时保持显示格式不变。

一个演示：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some Text A</td>
                    <td>21.06.2021</td>
                    <td>15:10</td>
                    <td>Some Text 2</td>
                </tr>
                <tr>
                    <td>Some Text B</td>
                    <td>22.07.2020</td>
                    <td>16:00</td>
                    <td>Some Text XYZ</td>
                </tr>
                <tr>
                    <td>Some Text C</td>
                    <td>22.07.2020</td>
                    <td>15:59</td>
                    <td>Some Text XYZ</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Notes</th>
                </tr>
            </tfoot>
        </table>

</div>

<script type="text/javascript">

$(document).ready(function() {

  $.fn.dataTable.moment( 'DD.MM.YYYY' );
  $.fn.dataTable.moment( 'HH:mm' );

  $('#example').DataTable( {
    order: [
      [1, "desc"],
      [2, "desc"]
    ],
  } );

} );

</script>

</body>
</html>

【讨论】：

感谢您的回复，但是当我添加一个新的表格行时，它会自动停止工作：jsfiddle.net/3am8502b/1 话虽如此并提供了 jsfiddle，但这个解决方案对我不起作用:-(
我通过您提供的链接打开了您的小提琴，并且数据看起来对我正确排序：包含“Some Text D”的行被排序到表格的底部，因为它具有最早的日期（“22.06.2020”）。您能否澄清您所看到的似乎不正确的内容？
嗯，它以这种方式对其进行排序：21.06., 22.07., 22.07.最后一个是 22.06。所以这是不正确的。应该是这样的：21.06., 22.06., 22.07., 22.07.
您要查看的排序顺序与您提供的数据不匹配。为什么当它是列表中最旧的日期时，您的新数据行会出现在第二个？
呃，对不起，你是对的。我误读了我自己的 jsfiddle 数据/行。是的，它在那里正常工作。非常感谢你！您的解决方案有效。