Javascript 禁用 jQuery DataTables 中特定列的排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3932587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable sorting for a particular column in jQuery DataTables
提问by usman
I am using the jQuery DataTables pluginto sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work:
我正在使用 jQuery DataTables 插件对表字段进行排序。我的问题是：如何禁用特定列的排序？我曾尝试使用以下代码，但没有奏效：
"aoColumns": [
{ "bSearchable": false },
null
]
I have also tried the following code:
我还尝试了以下代码：
"aoColumnDefs": [
{
"bSearchable": false,
"aTargets": [ 1 ]
}
]
but this still did not produce the desired results.
但这仍然没有产生预期的结果。
回答by wildehahn
This is what you're looking for:
这就是你要找的：
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
回答by Jeromy French
As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes.
从 DataTables 1.10.5 开始，现在可以使用 HTML5 data-* 属性定义初始化选项。
-from DataTables example - HTML5 data-* attributes - table options
-来自DataTables 示例 - HTML5 数据 -* 属性 - 表格选项
So you can use data-orderable="false"on the thof the column you don't want to be sortable. For example, the second column "Avatar" in the table below will not be sortable:
因此，您可以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>0,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>0,750</td>
</tr>
...[ETC]...
</tbody>
</table>
See a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/.
回答by Paulraj
To make a first column sorting disable, try with the below code in datatables jquery. The null represents the sorting enable here.
要禁用第一列排序，请尝试在数据表 jquery 中使用以下代码。null 表示此处启用排序。
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
回答by Paulo Fidalgo
Using Datatables 1.9.4 I've disabled the sorting for the first column with this code:
使用 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 ]
} ]
});
});
EDIT:
编辑：
You can disable even by using the no-sortclass on your <th>,
您甚至可以通过no-sort在您的<th>,
and use this initialization code:
并使用此初始化代码：
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
EDIT 2
编辑 2
In this example I'm using Datables with Bootstrap, following an old blog post. Now there is one link with updated material about styling Datatables with bootstrap.
在此示例中，我将 Datables 与 Bootstrap 结合使用，遵循旧博文。现在有一个链接，其中包含有关使用 bootstrap对数据表进行样式设置的更新材料。
回答by Bhavesh B
What I use is just add a custom attribute in thead td and control sorting by checking that attr value automatically.
我使用的只是在 thead td 中添加一个自定义属性并通过自动检查该 attr 值来控制排序。
So the HTML code will be
所以 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>
And JavaScript for initializing datatables will be (it will dynamically get the sorting information from table iteself ;)
并且用于初始化数据表的 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
});
});
回答by dtbarne
columnDefsnow accepts a class. I'd say this is the preferred method if you'd like to specify columns to disable in your markup:
columnDefs现在接受一个类。如果您想在标记中指定要禁用的列，我会说这是首选方法：
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th class="datatable-nosort">Actions</th>
</tr>
</thead>
...
</table>
Then, in your JS:
然后，在您的 JS 中：
$("table").DataTable({
columnDefs: [{
targets: "datatable-nosort",
orderable: false
}]
});
回答by Constantin Stan
Here is what you can use to disable certain column to be disabled:
以下是您可以用来禁用要禁用的某些列的内容：
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
So all you have to do is add the "orderable": false to the column you don't want to be sortable.
因此，您所要做的就是将 "orderable": false 添加到您不想排序的列中。
回答by abhinav
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
回答by Siddhartha esunuri
For Single column sorting disable try this example :
对于单列排序禁用试试这个例子：
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]
});
});
</script>
For Multiple columns try this example: you just need to add column number. By default it's starting from 0
对于多列试试这个例子：你只需要添加列号。默认从 0 开始
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
]
});
});
</script>
Here only Column 3works
这里只Column 3工作
回答by Marko Bajlovic
As of 1.10.5, simply include
从1.10.5 开始，只需包括
'orderable: false'
'可订购：假'
in columnDefs and target your column with
在 columnDefs 中并使用
'targets: [0,1]'
'目标：[0,1]'
Table should like like:
表应该像：
var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
