javascript - DataTables 无法在 Edge 中对“日期”列类型进行排序
问题描述
何时columnDefs
用于将列类型设置为“日期”排序中断,但仅在 Edge 中。Firefox 和 Chrome 继续按预期运行。
没有错误被抛出,如果我删除它重新启用排序为字母数字的类型。
谁能告诉我为什么会发生这种情况以及我该如何解决?
下面的确切可重现示例:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body>
<table id='target'>
<thead>
<tr>
<th>Foo</th>
<th width='200'>date</th>
<th>bar</th>
</tr>
</thead>
</table>
<script>
console.log('script start');
$('#target').DataTable({
'pageLength': 100,
'lengthMenu': [100, 150, 200],
'data': [
['aaa', '30-Nov-2020', 'ccc'],
['aaa', '03-Nov-2020', 'ccc'],
['aaa', '31-Oct-2020', 'ccc'],
['aaa', '30-Oct-2020', 'ccc'],
['aaa', '06-Oct-2020', 'ccc'],
['aaa', '30-Sep-2020', 'ccc'],
['aaa', '30-Sep-2020', 'ccc'],
['aaa', '15-Sep-2020', 'ccc']
],
"columnDefs": [
{
"targets": 1,
"type": "date"
}
]
});
</script>
</body>
</html>
解决方案
如果问题仍然存在,您还可以参考此示例在 MS Edge 浏览器上运行良好。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<script>
$(function () {
$.fn.dataTable.moment("DD/MM/YYYY HH:mm a");
$('#example').DataTable({
"scrollX": true,
"order": [[2, "desc"]]
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Company</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>16/05/2017 05:44 pm</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>15/05/2017 05:43 pm</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>12/02/2017 05:43 pm</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>13/05/2017 05:45 am</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>11/05/2017 05:41 pm</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>13/05/2017 05:41 pm</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>12/05/2017 05:41 pm</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
输出:
推荐阅读
- python - Python SFTP:连接中断时获取通知
- python - 如何在异步 sqlalchemy 中正确处理多对多?
- django - views.my_login_view 没有返回 HttpResponse 对象。它返回 None 而不是
- linux - 配置 yum repo 以仅从我公司内部网络安装软件包
- html - 平滑同时过渡高度和边距
- excel - 将两列依次放在一列中 - Google Sheets / Excel
- batch-file - 在单独的 cmd 窗口和不同的工作目录中运行每个命令
- python - 从值范围中获取值
- node.js - 从未知长度的数组中获取第一项和最后一项 - MongoDB
- excel - 选择两个特定选项按钮时选项按钮变灰