DataTables无法在Edge中对“日期"列类型进行排序 [英] DataTables cannot sort 'date' column type in Edge
本文介绍了DataTables无法在Edge中对“日期"列类型进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当使用columnDefs将列类型设置为日期"时，排序将中断，但仅限于Edge. Firefox和Chrome继续表现正常.
When columnDefs is used to set a column type as 'date' the sorting breaks, but only in Edge. Firefox and Chrome continue to behave as expected.
不会引发任何错误，如果我删除该类型，它将重新启用按字母数字排序.
No errors are thrown and if I remove the type it re-enables sorting as alphanumeric.
任何人都可以告知发生这种情况的原因以及如何解决吗?
Can anybody advise why this is occuring and how I can address it?
以下确切的可复制示例:
Exact reproducable example below:
<!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浏览器上运行正常.
If the issue persists then you can also refer this example is working fine with the MS Edge browser.
<!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>
输出:
这篇关于DataTables无法在Edge中对“日期"列类型进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
