jQuery - 第三方表格插件DataTables使用详解16（数据排序）

2018-04-11 发布：hangge 阅读：3523

二十七、排序的设置

1，是否启用排序功能

（1）默认情况下点击列头可以进行排序（升、降序切换）：

（2）如果将 ordering 配置属性设置为 false 可以禁用该功能：

$('#myTable').DataTable({
  "ordering": false,  //不允许排序
  //.......

2，默认排序设置

（1）下面样例演示：当初始化时默认按第 2 列的数据降序排列。

$('#myTable').DataTable({
  "order": [[1,'desc']],  //按第2列数据降序排序　
  //.......

（2）下面样例演示：初始化时先按第 2 列数据降序排列，再按第 3 列数据升序排列。

$('#myTable').DataTable({
  "order": [[1,'desc'],[2,'asc']],  //按第2列数据降序，第2列数据升序排列
  //.......

（3）下面样例演示：初始化时不按任何列排序。

$('#myTable').DataTable({
  "order": [],  //默认不按任何列排序
  //.......

3，只有部分列支持排序

下面样例只有一列和最后一列可以排序，第二列（姓名）不可排序。

<script type="text/javascript">
  $(document).ready(function() {
    $('#myTable').DataTable({
      "ajax": 'data.txt',
      "columns": [
          {},
          {orderable: false},
          {},
      ]
    });
  });
</script>

<table id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

4，在 td 标签上指定用于排序的值

默认情况下，点击列头后都是根据单元格里的内容进行排序的。我们可以通过 data-order 标签属性指定与内容不同的值，该值会专门用于排序（不会在界面上显示出来）。

<table id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>011</td>
            <td>张三</td>
            <td data-order="1479686400">2011-11-23</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td data-order="1479687400">2001-11-23</td>
        </tr>
        <tr>
            <td>003</td>
            <td>刘士元</td>
            <td data-order="1479786401">2021-08-21</td>
        </tr>
    </tbody>
</table>