如何从 DataTables 中删除排序选项？
Posted
技术标签:
【中文标题】如何从 DataTables 中删除排序选项？【英文标题】：How to remove sorting option from DataTables? 【发布时间】：2013-04-26 12:00:41 【问题描述】：我正在使用DataTables plugin。我不想使用默认出现在每个<thead> 上的排序选项（按 ASC 或 DESC 顺序对列进行排序）。如何删除该排序图标？
【问题讨论】：
【参考方案1】：在 jQuery DataTables 的新版本 1.10 中，您必须使用 ordering 选项来禁用对整个表的排序：
$('#example').DataTable(
"ordering": false
);
【讨论】：
我在文档中看不到排序必须在全局范围内使用，并且如果单独为所有列设置排序不会消失。然而，答案似乎是正确的。如果我将每一列设置为"ordering": false，那么排序符号将保留在第一列，即使它不起作用。至少对我来说（DataTables 版本 1.10.20）。
我确认这也适用于angular 2+。 dtOptions: DataTables.Settings ordering: false,【参考方案2】：
与@ravisolanki07 非常相似，只是实现方式不同。
var oTable = $('#example').dataTable(
"aoColumnDefs": [
"bSortable": false, "aTargets": [ 0, 1, 2, 3 ] ,
"bSearchable": false, "aTargets": [ 0, 1, 2, 3 ]
]
);
【讨论】：
感谢指定索引【参考方案3】：好的，所以，这里的答案有点老了。所以我想我可以提供更新的答案：
source documentation
截至 2018 年，每个领域实现这一目标的方法是：
$('#id-of-my-table').DataTable(
"columnDefs": [
"orderable": false, "targets": [0, 4, 5, 6] ,
"orderable": true, "targets": [1, 2, 3]
]
);
如您所见，targets 接受一个列索引数组。
【讨论】：
您甚至可以省略可排序的 true 部分，只说明禁用排序的部分。 这对我有用。只需要把可订购的假。谢谢。【参考方案4】：如果您想禁用默认排序但保持列可排序，只需使用以下配置：
$(document).ready( function()
$('#example').dataTable(
"aaSorting": []
);
)
【讨论】：
这就是我要寻找的。 tnx【参考方案5】：您还可以使用数据属性在表本身上传递选项。
<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 仍然在第一列上添加图标，在这种情况下，使用 data-ordering on代替桌子。
如果您使用相同的自定义脚本来生成所有数据表，这会很方便。
【讨论】：
【参考方案6】：您可以尝试两种方法。
首先，尝试将“bSort”设置为 false。 请注意，这将禁用所有排序。
$('#jTable').dataTable( "bSort" : false );
其次，尝试将 aaSorting 设置为空。
请注意，这将删除特定列的排序。
$('#jTable').dataTable( "aaSorting" : [[]] );
让我们知道是否适合您。 希望对你有帮助，
卡希夫·索兰吉
【讨论】：
【参考方案7】：使用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
]
);
)
【讨论】：
【参考方案8】：您可以在aocolumn 中通过bSortable 将其设置为false，例如：
$('#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 从搜索中排除
【讨论】：
【参考方案9】：-> 用于删除特定列中的排序，然后使用 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 ]
]
);
【讨论】：
【参考方案10】：你可以例如将style="display:none;" 设置为箭头元素。您可以使用 javascript 以编程方式设置它，也可以使用 CSS 类。首先，您必须使用 FireBug 等开发人员控制台检查 HTML 代码（箭头元素）。
【讨论】：
是的。可能不是在我回答的时候。 :) 然后设置 background-image 属性就可以了...【参考方案11】：老问题，但这些答案都不适合我，因为它们都没有阻止点击排序，我不想重新初始化，所以我会发布我的解决方案：
基本上，克隆标题，从<th> 单元格中删除sorting 类，在真实标题后插入克隆并隐藏原始标题。当您想重新启用时，只需重新显示原始标题并删除克隆。
这适用于我的情况，您可能需要根据您的设置调整您使用的 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();
【讨论】：
【参考方案12】：你可以用这个
"ordering": false,
完整代码：
$('#example').DataTable(
"ordering": false,
);
【讨论】：
以上是关于如何从 DataTables 中删除排序选项？的主要内容，如果未能解决你的问题，请参考以下文章
如何删除 jQuery DataTables 插件添加的搜索栏和页脚？