如何使用單獨的列對 jQuery DataTables 表進行排序？

Question

是否可以使用單獨的列對 DataTables 表進行排序？ 在下面的示例中，默認情況下使用第一列對表格進行排序，該列也是隱藏的。 即使第三列是日期列，它也不是數字格式。 當嘗試使用第三列對表格進行排序時，它是按字母順序而不是按日期排序。

如何使用第三列正確按日期對表格進行排序？ 切換第三列時是否可以使用隱藏的第一列對表格進行排序？

 $('#table').DataTable({ responsive: true, "order": [[0, "desc"]], "columnDefs": [ { "targets": [0], "visible": false, "searchable": false } ] });

 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> <table id="table"> <thead> <tr> <th>Numerical date</th> <th>Description</th> <th>String format date</th> </tr> <thead> <tbody> <tr> <td>20200801</td> <td>Record 1</td> <td>August 1, 2020</td> </tr> <tr> <td>20200701</td> <td>Record 2</td> <td>July 1, 2020</td> </tr> <tr> <td>20200501</td> <td>Record 3</td> <td>May 1, 2020</td> </tr> <tr> <td>20200401</td> <td>Record 4</td> <td>April 1, 2020</td> </tr> </tbody> </table>

Answer 1

您可以添加以下內容。 您應該能夠正確按日期排序：

"aoColumns": [{},{},{"bSortable": true, "sType": "date"}] 

在下面的演示中查看它的實際效果：

 $('#table').DataTable({ responsive: true, "order": [[2, "desc"]], "columnDefs": [ { "targets": [0], "visible": false, "searchable": false } ], "aoColumns": [{},{},{"bSortable": true, "sType": "date"}] });

 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> <table id="table"> <thead> <tr> <th>Numerical date</th> <th>Description</th> <th>String format date</th> </tr> <thead> <tbody> <tr> <td>20200801</td> <td>Record 1</td> <td>August 1, 2020</td> </tr> <tr> <td>20200701</td> <td>Record 2</td> <td>July 1, 2020</td> </tr> <tr> <td>20200501</td> <td>Record 3</td> <td>May 1, 2020</td> </tr> <tr> <td>20200401</td> <td>Record 4</td> <td>April 1, 2020</td> </tr> </tbody> </table>

Answer 2

你可以給 tds 一個數據排序屬性。 那么你根本不需要第一列。

 $('#table').DataTable({ responsive: true, "order": [ [1, "desc"] ] });

 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script> <table id="table"> <thead> <tr> <th>Description</th> <th>String format date</th> </tr> <thead> <tbody> <tr> <td>Record 1</td> <td data-sort="20200801">August 1, 2020</td> </tr> <tr> <td>Record 2</td> <td data-sort="20200701">July 1, 2020</td> </tr> <tr> <td>Record 3</td> <td data-sort="20200501">May 1, 2020</td> </tr> <tr> <td>Record 4</td> <td data-sort="20200401">April 1, 2020</td> </tr> </tbody> </table>