DataTables не может сортировать тип столбца «дата» в Edge - PullRequest
Новая
       84

DataTables не может сортировать тип столбца «дата» в Edge

1 голос
/ 02 марта 2020

Когда columnDefs используется для установки типа столбца как «дата», сортировка прерывается, но только в Edge. Firefox и Chrome продолжают вести себя как ожидалось.

Не выдается никаких ошибок, и если я удаляю тип, он снова включает сортировку как alphanumeri c.

Может кто-нибудь посоветовать, почему это происходит и как я могу решить эту проблему?

Точный воспроизводимый пример ниже: 

<!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>

1 Ответ

1 голос
/ 03 марта 2020

Если проблема не устраняется, вы также можете сослаться на этот пример, который работает нормально с браузером 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>

Выход:

enter image description here

...