Question

我正在使用DataTables plugin。我不想在每个<thead>上使用排序选项（按ASC或DESC顺序对列进行排序）。如何删除排序图标？

Answer 1

在jQuery DataTables的新版本1.10中，您必须使用ordering选项禁用整个表的排序：

$('#example').DataTable({
    "ordering": false
});

Answer 2

与@ ravisolanki07非常相似，这只是实现这一目标的另一种方式。

var oTable = $('#example').dataTable( {
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0, 1, 2, 3 ] }, 
                { "bSearchable": false, "aTargets": [ 0, 1, 2, 3 ] }
});

Answer 3

如果要禁用默认排序但保持列可排序，只需使用以下配置：

$(document).ready( function() {
    $('#example').dataTable({
        "aaSorting": []
    });
})

Answer 4

好的，所以这里的答案有点老了。所以我想我可以提供一个新的答案：

source documentation

截至2018年，每个领域实现此目标的方法是：

$('#id-of-my-table').DataTable({
    "columnDefs": [
        { "orderable": false, "targets": [0, 4, 5, 6] },
        { "orderable": true, "targets": [1, 2, 3] }
    ]
});

如您所见，目标接受列索引数组。

Answer 5

我可以想到你可以尝试的两件事。

首先，尝试将“bSort”设置为false。请注意，这将禁用四周的排序，因此无需在单个列上禁用它。

$('#jTable').dataTable({ "bSort" : false } );

其次，尝试将aaSorting设置为空。请注意，如果您仍希望允许某些其他列可排序，则可以尝试这样做。

$('#jTable').dataTable({ "aaSorting" : [[]] });

让我们知道是否适合您。希望它有所帮助，

Kashif Solangi

Answer 6

使用aoColumns属性，可以轻松控制对特定列的排序。下面给出一个例子：

$(document).ready(function() {
oTable = jQuery('#DataTables_Table_0').dataTable( {           
            "bDestroy": true,
            "bAutoWidth": true,  
            "bFilter": true,
            "bSort": true, 
            "aaSorting": [[0]],         
            "aoColumns": [
                { "bSortable": false },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": false }
            ]   
        } );
 })

Answer 7

您还可以使用数据属性在表本身上传递该选项。

<table
   data-paging="false"
   data-searching="false"
   data-ordering="false"
>

相同的原理适用于列标题。

<table>
<thead>
<tr>
    <th>I'm sortable</th>
    <th data-orderable="false">I'm not sortable</th>
</tr>
</thead>

但是，我遇到了一种情况，我想删除所有列的排序，并意识到在所有列上使用th data-orderable="false"时，Datatable仍在第一列上添加图标，在这种情况下，请使用{{ 1}}放在桌子上。

如果您使用相同的自定义脚本来生成所有数据表，这将很方便。

Answer 8

你可以，例如将style="display:none;"设置为箭头元素。您可以使用JavaScript以编程方式设置它，也可以使用CSS类。首先，您必须使用一些开发人员控制台（如FireBug）检查HTML代码（箭头元素）。

Answer 9

您可以在bSortable中false到aocolumn进行设置，如：

$('#example').dataTable({
 "aoColumns": [
                                 { "sType": "html","bSortable": false, "bSearchable": false },
                                 { "sType": "html" },
                                 { "sType": "html", "bSortable": false, "bSearchable": false },
                                 { "sType": "html" },
                                 { "sType": "html","bSortable": false, "bSearchable": false },
                                 { "sType": "html" },
                                 { "sType": "html" },
                                 { "sType": "html" },
                                 { "sType": "date-euro" }
                                 ]

                            });

您还可以将bSearchable设置为false

从搜索中排除

Answer 10

老问题，但这些答案都不适合我，因为它们都没有阻止点击排序，而且我不想重新初始化，所以我会发布我的解决方案：

基本上，克隆标题，从 sorting 单元格中删除 <th> 类，在真实标题之后插入克隆并隐藏原始标题。当您想重新启用时，只需重新显示原始标题并删除克隆。

这适用于我的情况，您可能需要根据您的设置调整您使用的 thead 选择器。

// grab the header
const stashedHeader = $('.dataTable thead');
// copy it and remove sorting class from the copy's th cells
const nosortClone = stashedHeader.clone();
nosortClone.find('th').removeClass('sorting');
// hide original and insert clone after it
stashedHeader.hide().after(nosortClone);

...
// re-enable
stashedHeader.show()
nosortClone.remove();

Answer 11

-> 用于删除特定列的排序，然后使用 orderable: false

-> 用于从特定列中删除搜索，然后使用 searchable：假

 $('#table-name').DataTable({
            "columns": [
                   {"data": "column_name"},
                   {"data": "column_name" , orderable: false},
                   {"data": "column_name"},
                   {"data": "column_name" , orderable: false},
                   {"data": "action"}
                  ],
                  aoColumnDefs: [
                    {
                       bSortable: false,
                       aTargets: [ -1 ]
                    }
                 ]
      });

如何从DataTables中删除排序选项？

11 个答案: