DataTables -如何按日期排序(dd.mm.yyyy)
DataTables -如何按日期排序(dd.mm.yyyy)
提问于 2021-06-28 15:55:29
我有一个包含多列的表。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论坛上找到的答案，但没有任何答案可以解决我的问题……
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-28 20:56:18
因为您的表中有两种不同的日期/时间格式(一种用于第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' );这两个字符串的格式化选项作为moment.js库的一部分记录在here文档中。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68159588
复制相关文章
相似问题
腾讯云开发者
