数据表排序日期和日期时间列
Datatables sort date and datetime colums
我有一个包含多个数据的页面table。某些 table 仅具有用于排序的日期字段,而同一页面上的其他 table 具有日期时间字段。 date/datetime 的语言环境是德语。
我可以让数据tables 正确地按日期 或 日期时间排序,但我无法让它按任何一个日期排序。我用一个 table 创建了这个 fiddle:
https://jsfiddle.net/r23yfdz8/
$.fn.dataTable.moment( 'DD.MM.YYYY' ); // uncomment this to sort column 1 correctly
//$.fn.dataTable.moment( 'DD.MM.YYYY HH:mm' ); // this sorts column 2 (date and time) correctly
$('#example').DataTable()
body {
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<table id="example">
<thead>
<tr>
<th>date</th>
<th>date + time</th>
</tr>
</thead>
<tbody>
<tr><td>20.01.2018</td><td>20.01.2018 09:00</td></tr>
<tr><td>12.02.2019</td><td>12.02.2019 16:00</td></tr>
<tr><td>13.06.2017</td><td>13.06.2017 09:00</td></tr>
<tr><td>20.01.2018</td><td>20.01.2018 16:00</td></tr>
<tr><td>01.10.2016</td><td>01.10.2016 09:00</td></tr>
<tr><td>12.10.2018</td><td>12.10.2018 16:00</td></tr>
<tr><td>21.10.2017</td><td>21.10.2017 09:00</td></tr>
<tr><td>04.10.2018</td><td>04.10.2018 16:00</td></tr>
<tr><td>13.10.2018</td><td>13.10.2018 09:00</td></tr>
<tr><td>01.11.2018</td><td>01.11.2018 16:00</td></tr>
</tbody>
</table>
- 点击第二列header“日期+时间”。您会注意到它对 table 进行了正确排序。
- 单击另一列 header“日期”。您会注意到日期到处都是,而且排序不正确
- 在JS代码中,注释掉第二行,取消第一行的注释。重新运行后,fiddle 现在可以正确对第 1 列进行排序,但无法对第 2 列进行排序。
我很想在 DOM 的标签中添加一个 类(“sort-datetime”和“sort-date”),然后告诉数据tables 如何对值进行排序,但我的知识不足以弄清楚如何做到这一点。
感谢您的帮助!
$.fn.dataTable.moment
插件可以在一个table中多次使用,以适应不同的格式。
如果我同时取消注释你的两个格式化程序,那么你的演示就可以正常工作。
我有一个包含多个数据的页面table。某些 table 仅具有用于排序的日期字段,而同一页面上的其他 table 具有日期时间字段。 date/datetime 的语言环境是德语。
我可以让数据tables 正确地按日期 或 日期时间排序,但我无法让它按任何一个日期排序。我用一个 table 创建了这个 fiddle: https://jsfiddle.net/r23yfdz8/
$.fn.dataTable.moment( 'DD.MM.YYYY' ); // uncomment this to sort column 1 correctly
//$.fn.dataTable.moment( 'DD.MM.YYYY HH:mm' ); // this sorts column 2 (date and time) correctly
$('#example').DataTable()
body {
font-family: sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<table id="example">
<thead>
<tr>
<th>date</th>
<th>date + time</th>
</tr>
</thead>
<tbody>
<tr><td>20.01.2018</td><td>20.01.2018 09:00</td></tr>
<tr><td>12.02.2019</td><td>12.02.2019 16:00</td></tr>
<tr><td>13.06.2017</td><td>13.06.2017 09:00</td></tr>
<tr><td>20.01.2018</td><td>20.01.2018 16:00</td></tr>
<tr><td>01.10.2016</td><td>01.10.2016 09:00</td></tr>
<tr><td>12.10.2018</td><td>12.10.2018 16:00</td></tr>
<tr><td>21.10.2017</td><td>21.10.2017 09:00</td></tr>
<tr><td>04.10.2018</td><td>04.10.2018 16:00</td></tr>
<tr><td>13.10.2018</td><td>13.10.2018 09:00</td></tr>
<tr><td>01.11.2018</td><td>01.11.2018 16:00</td></tr>
</tbody>
</table>
- 点击第二列header“日期+时间”。您会注意到它对 table 进行了正确排序。
- 单击另一列 header“日期”。您会注意到日期到处都是,而且排序不正确
- 在JS代码中,注释掉第二行,取消第一行的注释。重新运行后,fiddle 现在可以正确对第 1 列进行排序,但无法对第 2 列进行排序。
我很想在 DOM 的标签中添加一个 类(“sort-datetime”和“sort-date”),然后告诉数据tables 如何对值进行排序,但我的知识不足以弄清楚如何做到这一点。
感谢您的帮助!
$.fn.dataTable.moment
插件可以在一个table中多次使用,以适应不同的格式。
如果我同时取消注释你的两个格式化程序,那么你的演示就可以正常工作。