簡體   English   中英

DataTables 無法在 Edge 中對“日期”列類型進行排序

[英]DataTables cannot sort 'date' column type in 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>

輸出:

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM