如何使用单独的列对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>

​