我正在使用DataTables 插件。我不想使用每个<thead>. 如何删除该排序图标？
问问题
125017 次
12 回答
89
在 jQuery DataTables 的新版本 1.10 中，您必须使用ordering选项来禁用整个表的排序：
$('#example').DataTable({
"ordering": false
});
于 2016-08-12T18:01:42.060 回答
27
与@ravisolanki07 非常相似，只是实现此目的的不同方式。
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0, 1, 2, 3 ] },
{ "bSearchable": false, "aTargets": [ 0, 1, 2, 3 ] }
]
});
于 2013-05-02T19:11:06.127 回答
14
好的，所以，这里的答案有点老了。所以我想我可以提供更新的答案：
截至 2018 年，每个领域实现这一目标的方法是：
$('#id-of-my-table').DataTable({
"columnDefs": [
{ "orderable": false, "targets": [0, 4, 5, 6] },
{ "orderable": true, "targets": [1, 2, 3] }
]
});
如您所见，targets 接受一个列索引数组。
于 2018-06-28T20:53:47.273 回答
12
如果要禁用默认排序但保持列可排序，只需使用以下配置：
$(document).ready( function() {
$('#example').dataTable({
"aaSorting": []
});
})
于 2013-05-02T17:57:18.633 回答
11
您还可以使用数据属性在表本身上传递选项。
<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"在所有列上使用 a 时，Datatable 仍然在第一列上添加图标，在这种情况下，请改用data-ordering表格上的。
如果您使用相同的自定义脚本来生成所有数据表，这会很方便。
于 2020-10-24T15:02:21.507 回答
6
您可以尝试两种方法。
首先，尝试将“bSort”设置为 false。请注意，这将禁用所有排序。
$('#jTable').dataTable({ "bSort" : false } );
其次，尝试将 aaSorting 设置为空。请注意，这将删除特定列的排序。
$('#jTable').dataTable({ "aaSorting" : [[]] });
让我们知道是否适合您。希望能帮助到你，
卡希夫·索朗吉
于 2017-04-05T03:52:29.937 回答
3
使用该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 }
]
} );
})
于 2014-05-26T12:19:52.987 回答
1
您可以将其设置bSortable为：falseaocolumn
$('#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
于 2013-05-02T13:20:40.650 回答
1
-> 删除特定列中的排序，然后使用orderable: false
-> 用于从特定列中删除搜索然后使用searchable: false
$('#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 ]
}
]
});
于 2021-07-09T11:08:30.430 回答
0
例如，您可以设置style="display:none;"为箭头元素。您可以使用 JavaScript 以编程方式设置它，也可以使用 CSS 类。首先，您必须使用诸如 FireBug 之类的开发人员控制台检查 HTML 代码（箭头元素）。
于 2013-05-02T11:52:54.163 回答
0
老问题，但这些答案都没有对我有用，因为它们都没有阻止点击排序，我不想重新初始化，所以我会发布我的解决方案：
基本上，克隆标题，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();
于 2021-06-21T15:35:06.997 回答
0
只需您可以使用它
"ordering": false,
完整代码：
$('#example').DataTable({
"ordering": false,
});
于 2021-09-25T06:42:07.827 回答