How to sort a jQuery DataTables table using a separate column?

Question

Is it possible to sort a DataTables table using a separate column? In the example below, the table is sorted using the first column by default, which is also hidden. Even though the third column is a date column, it is not in a numerical format. When trying to sort the table using the third column, it is sorting alphabetically rather than by date.

How can the table be sorted by date correctly using the third column? Is it possible to sort the table using the hidden first column when toggling the third column?

 $('#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

You can add the following. You should be able to sort by date correctly:

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

See it in action in the demo below:

 $('#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

You can give tds a data-sort attribute. Then you wouldn't need the first column at all.

 $('#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>