数据表 - 如何按日期排序 (dd.mm.yyyy)

nei*_*sor 3 javascript datatable date datatables

我有一个包含多列的表。1 列包含格式为 dd.mm.yyyy 的日期(例如:2021 年 5 月 26 日)。我正在尝试实现按日期默认排序。

我的桌子看起来像这样:

<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>
Run Code Online (Sandbox Code Playgroud)

<body>到目前为止,我的 HTML 文件末尾有这个 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>
Run Code Online (Sandbox Code Playgroud)

问题是,这不能正确地对表进行排序。它似乎只按天排序(忽略月份和年份),而不是整个日期。

有什么想法如何继续吗?我已经尝试了在这里以及 DataTables 论坛上找到的所有可用答案,但没有任何答案可以解决我的问题...

谢谢

and*_*mes 6

因为您的表中有两种不同的日期/时间格式(一种用于第 2 列日期,另一种用于第 3 列时间),所以我建议使用终极日期/时间排序插件

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

<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>
Run Code Online (Sandbox Code Playgroud)

然后,在正文脚本中,您可以定义所需的两种格式:

$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
Run Code Online (Sandbox Code Playgroud)

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

DataTables 负责剩下的事情。

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

演示:

<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>
Run Code Online (Sandbox Code Playgroud)