在 jQueryDataTables 中禁用特定列的排序

我使用 jQueryDataTables 插件对表字段进行排序。我的问题是: 如何禁用特定列的排序？我试过下面的代码，但是没有用:

"aoColumns": [
{ "bSearchable": false },
null
]

我还尝试了以下代码:

"aoColumnDefs": [
{
"bSearchable": false,
"aTargets": [ 1 ]
}
]

但这仍然没有产生预期的结果。

205973 次浏览
小开

若要禁用第一列排序，请尝试在数据表 jquery 中使用以下代码。空表示此处的排序启用。

$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );

在 jQuery 数据表中禁用列的排序

小开

这就是你要找的:

$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
小开

你也可以这样使用负指数:

$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
小开

我所使用的只是在 theadtd 中添加一个自定义属性，并通过自动检查 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
});
});
小开

使用 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 ]
} ]
});
});

编辑:

即使使用 <th>上的 no-sort类也可以禁用,

并使用这个初始化代码:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]

编辑2

在这个例子中，我正在使用带有 Bootstrap 的数据表，遵循一个旧的博客文章。现在有一个关于 使用引导程序样式化数据表更新材料的链接。

小开 
"aoColumnDefs" : [
{
'bSortable' : false,
'aTargets' : [ 0 ]
}]

这里的 0是列的索引，如果您希望不排序多个列，请提及由 comma(,)分隔的列索引值

小开 
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
小开

下面是您可以用来禁用某些要禁用的列的方法:

 $('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});

因此，您所要做的就是将“ orderable”: false 添加到您不希望成为可排序的列中。

小开

columnDefs现在接受一个类。如果您希望在标记中指定要禁用的列，我认为这是首选方法:

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th class="datatable-nosort">Actions</th>
</tr>
</thead>
...
</table>

然后，在您的 JS 中:

$("table").DataTable({
columnDefs: [{
targets: "datatable-nosort",
orderable: false
}]
});
小开

如果你已经隐藏了一些列，像我隐藏姓氏列。我只需要连接 fname，lname，所以我做了查询，但隐藏了前端的列。在这种情况下，对残疾分类的修改如下:

    "aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 3 ] },
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],

注意，我在这里具有隐藏功能

    "columnDefs": [
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],

然后我把它合并成 "aoColumnDefs"

小开

代码如下所示:

$(".data-cash").each(function (index) {
$(this).dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"bSort": false,
"aaSorting": []
});
});
小开

从 DataTable 1.10.5开始，现在可以定义初始化了 选项使用 HTML5 data-* 属性。

从 DataTables 示例 -HTML5 data-* Attribute-table 选项

因此，可以在不希望排序的列的 th上使用 data-orderable="false"。例如，下表中的第二列“阿凡达”将不可排序:

<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&amp;d=identicon&amp;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&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>

参见 Https://jsfiddle.net/jhfrench/6yxvxt7l/的典范。

小开

对于“单列排序”禁用，请尝试以下示例:

<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]
});
});
</script>

对于多列，请尝试这个例子: 您只需要添加列号。默认情况下，它从0开始

<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
]
});
});
</script>

这里只有 Column 3工作

小开

从 1.10.5开始，只需包括

‘有序: 假’

并将您的列作为目标

目标: [0,1]

表格如下:

var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
小开

使用类别:

<table  class="table table-datatable table-bordered" id="tableID">
<thead>
<tr>
<th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
<th class="sort-alpha">Employee name</th>
<th class="sort-alpha">Send Date</th>
<th class="sort-alpha">Sender</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
<td>Alexander Schwartz</td>
<td>27.12.2015</td>
<td>dummy@email.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#tableID').DataTable({
'iDisplayLength':100,
"aaSorting": [[ 0, "asc" ]],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}]
});
});
</script>

现在可以给 < TH > 赋予“ nosort”类

小开

这就是答案！

targets是列号，从0开始

$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
小开

更新 Bhavish 的回答(我认为这是针对旧版本的 DataTables 的，对我不起作用)。我想他们改了属性名。试试这个:

<thead>
<tr>
<td data-sortable="false">Requirements</td>
<td data-sortable="false">Automated</td>
<td>Created On</td>
</tr>
</thead>
<tbody>
<tr>
<td>
小开

这对我的专栏很有用

 $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false
}]});
小开

在表中设置“ no-sort”类 然后加入 css {指针事件: 无! 重要; 光标: 默认! 重要; 背景图像: 无! 重要; } 通过这个它将隐藏箭头向上和禁用事件在头部。

小开

如果将 FIRST 列 orderable属性设置为 false，那么 必须的也设置了默认的 order列，否则它将无法工作，因为第一列是默认的排序列。下面的示例禁用对第一列进行排序，但将第二列设置为默认顺序列(请记住，dataTable 的索引是从零开始的)。

$('#example').dataTable( {
"order": [[1, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
小开

  1. 使用以下代码禁用第一列的排序:

    $('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );

  2. To disable default ordering, you can also use:

    $('#example').dataTable( {
"ordering": false,
} );
小开

可以在列上使用. notsortable ()方法

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_product.withPaginationType('full_numbers');
vm.dtOpt_product.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtProductTypes
}]


});


vm.dtColDefs_product = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
];
小开

有两种方法，一种是在 HTML 中定义表头时定义的

<thead>
<th data-orderable="false"></th>
</thead>

另一种方法是使用 javascript，例如，你有一个 table

<table id="datatables">
<thead>
<tr>
<th class="testid input">test id</th>
<th class="testname input">test name</th>
</thead>
</table>

那么,

$(document).ready(function() {
$('#datatables').DataTable( {
"columnDefs": [ {
"targets": [ 0], // 0 indicates the first column you define in <thead>
"searchable": false
}
, {
// you can also use name to get the target column
"targets": 'testid', // name is the class you define in <th>
"searchable": false
}
]
}
);
}
);

提交答案