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



我有一个包含多列的表。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>

到目前为止,我在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论坛上找到的所有可用答案,但没有任何答案可以解决我的问题。。。

谢谢

因为表中有两种不同的日期/时间格式(一种用于第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>

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

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

这两个字符串的格式选项在这里作为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>

最新更新