简体   繁体   中英

DataTables cannot sort 'date' column type in Edge

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>

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>

Output:

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM