如何使用单独的列对 jQuery DataTables 表进行排序？答案

【问题标题】：How to sort a jQuery DataTables table using a separate column?如何使用单独的列对 jQuery DataTables 表进行排序？
【发布时间】：2020-08-04 21:29:25
【问题描述】：

是否可以使用单独的列对 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>

【问题讨论】：

您可以使用orderData 功能 - 您可以查看示例here。该示例适用于稍微不同的情况 - 但该解决方案也适用于您的情况。
否则 DataTables 的 Moment.js plugin 可能能够直接满足您的日期排序要求。一个 SO 示例是 here。

标签： javascript jquery datatables

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：