DataTables 设置默认排序列并设置不可排序的列

Posted 2023-05-07

【中文标题】DataTables 设置默认排序列并设置不可排序的列

【英文标题】：DataTables Set Default sorting column and set unsortable columns

【发布时间】：2013-12-14 07:46:27

【问题描述】：

是否可以设置默认列在页面加载后进行排序？我想对我网站上的不同表使用一个数据表调用。是否可以添加一个th 类来实现这一点？

我还想禁用对某些列的排序，因为我正在寻找一个数据表调用来做所有事情，有没有我可以添加到 th 的类使其无法排序？

这是我调用的dataTable脚本

if (jQuery().dataTable) 
    $('#table-list-items').dataTable(
        "fnDrawCallback" : function () 
        ,
        "aLengthMenu": [
        [10, 15, 25, 50, 100, -1],
        [10, 15, 25, 50, 100, "All"]
        ],
        "iDisplayLength": 25,
        "oLanguage": 
            "sLengthMenu": "_MENU_ Records per page",
            "sInfo": "_START_ - _END_ of _TOTAL_",
            "sInfoEmpty": "0 - 0 of 0",
            "oPaginate": 
                "sPrevious": "Prev",
                "sNext": "Next"
            
        ,
        "aoColumnDefs": [
            'bSortable': true,
            'aTargets': [0]
        ]
    );

【问题讨论】：

查看“不可排序”列的解决方案：***.com/a/20547339/1430996

【参考方案1】：

根据table sorting docs，您可以使用order 选项来做到这一点：

$('.table-asc0').dataTable(
  order: [[0, 'asc']]
)

0 表示按第一列排序，asc 表示按升序排序。您也可以选择任何其他列并使用desc。

---

对于 1.10 之前的 DataTables 版本，您应该改用 aaSorting

$('.table-asc0').dataTable(
  aaSorting: [[0, 'asc']]
)

按第一列降序排列：

$('.table-asc1').dataTable(
  aaSorting: [[1, 'desc']]
)

【讨论】：

谢谢，但我有很多表，其中一些表中的第 2 列或第 4 列可能需要排序。是否可以通过添加一个类来做到这一点？

由于您可以定位 elems 并启用带有参数的 DataTable，因此您应该使用不同的参数在 differents 类上调用 Datatables，请参阅更新。

是的，到目前为止我一直在这样做。正在寻找是否可以使用 html 中的类来解决它。

喜欢只调用一次 DataTables 但参数不同？

使用不同的id $('#table-list-items').dataTable( and $('#table-activity-log').dataTable(

【参考方案2】：

设置初始顺序（DataTables 1.10）

使用order设置表格的初始顺序。

例如，按第二列降序排序：

$('#example').dataTable(
   "order": [[ 1, 'desc' ]]
);

有关代码和演示，请参阅 this jsFiddle。

---

禁用列排序（DataTables 1.10）

使用columnDefs 和orderable 禁用对某些列的排序。

例如，禁用对第三列和第四列的排序：

$('#example').dataTable(
   "columnDefs": [
       "targets": [2,3], "orderable": false 
  ]
);

有关代码和演示，请参阅 this jsFiddle。

---

为同一列设置初始顺序并禁用排序（DataTables 1.10）

您可以结合order 选项设置表格的初始顺序和orderable 以禁用对同一列的排序。

例如：

$('#example').dataTable(
   "order": [[ 0, 'desc' ]],
   "columnDefs": [
       "targets": [0], "orderable": false 
  ]
);

有关代码和演示，请参阅 this jsFiddle。

【讨论】：

做同样的怎么样？

你怎么能两者兼得？我禁用了我的第 0 列的排序，但希望由该确切列完成初始排序......但没有任何反应

【参考方案3】：

您可以通过表格 HTML 上的 data-order 数据属性执行此操作，这将为您提供逐个表格所需的灵活性，同时仍然允许您使用单个调用来初始化您的 dataTables：

<table className="table table-condensed table-striped" data-order="[[ 2, &quot;asc&quot; ]]" id="tableId">
    <thead>
        <tr>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
          <th>Col5</th>
          <th>Col6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>Val1</td>
          <td>Val2</td>
          <td>Val3</td>
          <td>Val4</td>
          <td>Val5</td>
          <td>Val6</td>
        </tr>
    </tbody>
</table>

【讨论】：

对于解决此技术问题的人，请务必使用小写的"asc" 和"desc"。

【参考方案4】：

只需包含以下代码：

    $(document).ready(function() 
        $('#tableID').DataTable( 
            "order": [[ 3, "desc" ]]
         );
     
);

参考：

https://datatables.net/examples/basic_init/table_sorting.html

【参考方案5】：

正确且有效：

    $('#admin').DataTable(
        "aaSorting": [[3, 'desc']],
        "bPaginate": true,
        "bProcessing": true,
        "columns": [
            'data' : 'request_code',
            'data' : 'name_receiver',
            'data' : 'name_area',
            'data' : 'created_at',
            'data' : 'state',
            'data' : 'city',
            'data' : 'history',
        ],
        "ajax": "route('my.route.name')",
        dom: 'Bfrtip',
        buttons: ['copy', 'excel', 'print'],
    );