DataTables设置默认排序列并设置无法排序的列

DataTables Set Default sorting column and set unsortable columns

本文关键字：排序 设置 DataTables 默认      更新时间：2023-12-15

页面加载后，是否可以将默认列设置为排序？我想在我的网站上对不同的表使用一个数据表调用。是否可以添加一个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]
        }]
    });
}

根据表格排序文档，您可以使用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']]
})

设置初始订单（DataTables 1.10）

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

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

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

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

禁用列排序（DataTables 1.10）

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

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

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

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

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

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

例如：

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

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

您可以通过表HTML上的data-order数据属性来实现这一点，这将为您提供逐表所需的灵活性，同时仍然允许您使用单个调用来初始化数据表：

<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>

是核心并且有效的：

    $('#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'],
    });

只需包含以下代码：

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

参考：

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

如果他们有任何错误，比如"DataTables警告重新初始化"，那么你可以使用它。这里的"审核日志"是表id。

 $(document).ready(function () {
    if ($.fn.dataTable.isDataTable('#audit-log') ) {
       table = $('#audit-log').DataTable();
       table.destroy();
    }
    $('#audit-log').DataTable({
       order: [[0, 'desc']]
    });
 });
相关文章：