DataTables无法在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中对“日期"列类型进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！