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