我正在使用jQuery datatables plugin对表字段进行排序。我的问题是如何禁用特定列的排序?我尝试使用以下代码,但它不起作用:
"aoColumns": [
{ "bSearchable": false },
null
]
我也尝试过以下代码:
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 1 ] }
]
但这仍未产生预期效果。
答案 0 :(得分:173)
这就是你要找的东西:
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
答案 1 :(得分:82)
从DataTables 1.10.5开始,现在可以定义初始化 使用HTML5 data- *属性的选项。
- dataTables documentation: HTML5 data-* attributes - table options
因此,您可以在不想要排序的列的set.seed(10239)
data<-data.frame(V1=sample(c(test[1:10],LETTERS[1:10]),10))
> data
V1
1 D
2 A
3 E
4 Potrs000006
5 Potrs000001
6 Potrs000007
7 Potrs000008
8 Potrs000003
9 B
10 Potrs000002
setDT(data)
> data[,.(V1[V1 %in% test], "chr9")]
V1 V2
1: Potrs000006 chr9
2: Potrs000001 chr9
3: Potrs000007 chr9
4: Potrs000008 chr9
5: Potrs000003 chr9
6: Potrs000002 chr9
上使用data-orderable="false"
。例如,第二列&#34;阿凡达&#34;在下表中将无法排序:
th
请参阅a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/。
答案 2 :(得分:63)
要禁用第一列排序,请尝试使用datatables jquery中的以下代码。 null表示此处的排序启用。
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
答案 3 :(得分:60)
使用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
在这个例子中,我正在使用带有Bootstrap的Datables,跟随一篇旧的博客文章。现在有一个链接包含有关styling Datatables with bootstrap的更新资料。
答案 4 :(得分:27)
我使用的只是在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
});
});
答案 5 :(得分:13)
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
}]
});
答案 6 :(得分:10)
您可以使用以下内容禁用某些要禁用的列:
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
所以你要做的就是将&#34; orderable&#34;:false添加到你不想排序的列中。
答案 7 :(得分:6)
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
答案 8 :(得分:5)
从 1.10.5 开始,只需添加
即可在columnDefs中'orderable:false'
并使用
定位您的列'目标:[0,1]'
表格应该像:
var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
答案 9 :(得分:4)
对于单列排序禁用,请尝试以下示例:
<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
有效
答案 10 :(得分:4)
如果您将FIRST列orderable
属性设置为false,那么必须也会设置默认的order
列,否则它将无效,因为第一列是默认排序柱。下面的示例禁用第一列的排序,但将第二列设置为默认顺序列(请记住dataTables的索引基于零)。
$('#example').dataTable( {
"order": [[1, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
答案 11 :(得分:3)
更新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>
答案 12 :(得分:3)
"aoColumnDefs" : [
{
'bSortable' : false,
'aTargets' : [ 0 ]
}]
此处0
是列的索引,如果您希望不对多列进行排序,请提及comma(,)
分隔的列索引值
答案 13 :(得分:2)
使用class:
O_CREAT
现在您可以将“nosort”类提供给&lt; TH&gt;
答案 14 :(得分:2)
这适用于我的单列
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false
}]});
答案 15 :(得分:1)
如果您必须隐藏某些列,例如我隐藏姓氏列。我只需要连接fname,lname,所以我查询但是从前端隐藏该列。在这种情况下禁用排序的修改是:
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 3 ] },
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
请注意,我在这里有隐藏功能
"columnDefs": [
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
然后我将其合并到"aoColumnDefs"
答案 16 :(得分:1)
使用以下代码禁用第一列的排序:
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
要禁用默认排序,您还可以使用:
$('#example').dataTable( {
"ordering": false,
} );
答案 17 :(得分:1)
你可以直接在列
上使用.notsortable()方法SAFE
答案 18 :(得分:1)
有两种方法,一种是在定义表标题时在html中定义的
<thead>
<th data-orderable="false"></th>
</thead>
另一种方法是使用javascript,例如,您拥有表格
<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
}
]
}
);
}
);
答案 19 :(得分:0)
代码如下所示:
$(".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": []
});
});
答案 20 :(得分:0)
您也可以使用负面索引:
$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
答案 21 :(得分:0)
这是答案!
targets
是列号,它从0开始
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
答案 22 :(得分:-1)
设置课程&#34; no-sort&#34;在桌子上 然后添加CSS .no-sort {pointer-events:none!important; cursor:default!important; background-image:none!important; } 通过它,它将隐藏头部的箭头updown和disble事件。