我正在使用 jQuery DataTables 插件对表字段进行排序。我的问题是：如何禁用特定列的排序？我已尝试使用以下代码，但没有奏效：
"aoColumns": [
{ "bSearchable": false },
null
]
我还尝试了以下代码：
"aoColumnDefs": [
{
"bSearchable": false,
"aTargets": [ 1 ]
}
]
但这仍然没有产生预期的结果。
禁用 jQuery DataTables 中特定列的排序
IT技术
javascript
jquery
sorting
datatables
2021-03-11 13:47:22
6个回答
这就是你要找的：
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
从 DataTables 1.10.5 开始，现在可以使用 HTML5 data-* 属性定义初始化选项。
-来自DataTables 示例 - HTML5 数据 -* 属性 - 表格选项
因此，您可以data-orderable="false"在th不想排序的列上使用。例如，下表中的第二列“头像”将不可排序：
<table id="example" class="display" width="100%" data-page-length="25">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>
要禁用第一列排序，请尝试在数据表 jquery 中使用以下代码。null 表示此处启用排序。
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
使用 Datatables 1.9.4 我已经使用以下代码禁用了第一列的排序：
/* Table initialisation */
$(document).ready(function() {
$('#rules').dataTable({
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sLengthMenu" : "_MENU_ records per page"
},
// Disable sorting on the first column
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0 ]
} ]
});
});
编辑：
您甚至可以通过no-sort在您的<th>,
并使用此初始化代码：
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
编辑 2
在此示例中，我将 Datables 与 Bootstrap 结合使用，遵循旧博文。现在有一个链接，其中包含有关使用 bootstrap对数据表进行样式设置的更新材料。
我使用的只是在 thead td 中添加一个自定义属性，并通过自动检查该 attr 值来控制排序。
所以 HTML 代码将是
<table class="datatables" cellspacing="0px" >
<thead>
<tr>
<td data-bSortable="true">Requirements</td>
<td>Test Cases</td>
<td data-bSortable="true">Automated</td>
<td>Created On</td>
<td>Automated Status</td>
<td>Tags</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>
用于初始化数据表的 JavaScript 将是（它将动态地从表本身获取排序信息；）
$('.datatables').each(function(){
var bFilter = true;
if($(this).hasClass('nofilter')){
bFilter = false;
}
var columnSort = new Array;
$(this).find('thead tr td').each(function(){
if($(this).attr('data-bSortable') == 'true') {
columnSort.push({ "bSortable": true });
} else {
columnSort.push({ "bSortable": false });
}
});
$(this).dataTable({
"sPaginationType": "full_numbers",
"bFilter": bFilter,
"fnDrawCallback": function( oSettings ) {
},
"aoColumns": columnSort
});
});