DataTables

Question

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

我的 table 看起来像这样：

<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>

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

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

谢谢

Answer 1

因为您的 table 中有两种不同的 date/time 格式（一种用于第 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 会处理剩下的事情。

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

演示：

<!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>

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

DataTables - How to sort by date (dd.mm.yyyy)

javascript

datatable

date