Datatables设置默认排序方式

柔光的暖阳◎ 2023-06-08 15:54 32阅读 0赞

在 BootStrap 中使用了 Datatables 插件，这个是真的舒服，表格一系列操作都省了，只需要简单copy一些样式过来就好了。  
  当然，Datatables是一款jquery表格插件，对表格操作有很强大的功能，看看下面这个示例就知道，实际上自己啥代码也没写，功能就都有了，自己配置一下参数就行了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
  本文主要是讲述Datatables的列排序问题，直接上代码。

$(document).ready(function() {
            $('#example').DataTable( {
                //先按第一列逆序排序，如果有相同，再按第二列顺序排序
                //order后面就是一个多维数组，可以自由增删
                "order": [[ 0, "desc" ],[ 1, "asc"]]
            } );
        } );

另外官网还提供了一种排序方式，但是我测试好像没有效果，如果上面的不行也可以试试。

$(document).ready(function() {
      $('#example').dataTable( {
     
        columnDefs: [ {
          targets: [ 0 ],
          orderData: [ 0, 1 ]  //如果第一列进行排序，有相同数据则按照第二列顺序排列
        }, {
          targets: [ 1 ],
          orderData: [ 1, 0 ]  //如果第二列进行排序，有相同数据则按照第一列顺序排列
        }, {
          targets: [ 4 ],
          orderData: [ 4, 0 ]  //如果第五列进行排序，有相同数据则按照第一列顺序排列
        } ]
      } );
    } );

参考文章：【1】[多列排序 基本初始化 示例 Datatables中文网][_ _ Datatables]  
     【2】[order() 获取/设置表格的排序 文档(Options & API) DataTables中文网][order_ _ _Options _ API_ DataTables]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20230531/026d5cabeee1493c8fa7c25fe5959bab.png
[_ _ Datatables]: http://datatables.club/example/basic_init/multi_col_sort.html
[order_ _ _Options _ API_ DataTables]: http://www.datatables.club/reference/api/order%28%29.html