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 论坛上找到的所有可用答案,但没有任何答案可以解决我的问题...
谢谢
因为您的表中有两种不同的日期/时间格式(一种用于第 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)
| 归档时间: |
|
| 查看次数: |
7863 次 |
| 最近记录: |