我需要隐藏列以显示在jquery数据表中。 当我使用bVisible属性隐藏列时,它会从DOM中消失。
我想将列的表格单元格的显示属性设置为无,以便这些值不会出现在视图中,但是它们应该仍然存在于DOM中,因为我隐藏的列标识了该行唯一,我需要知道行选择的唯一ID。如何实现这一点。
我使用服务器端分页使用aaData属性填充表。
看看这个问题,但这些选项将其从DOM中删除。 jquery datatables hide column
答案 0 :(得分:33)
您应该使用className
以及columnDefs或columns,
在你的CSS中定义hide_column
类,如下所示
.hide_column {
display : none;
}
您有两种方法可以分配.hide_column
类:
使用columnDefs
(将自定义类指定给第一列):
$('#example').DataTable( {
columnDefs: [
{ targets: [ 0 ],
className: "hide_column"
}
]
} );
或columns
$('#example').DataTable( {
"columns": [
{ className: "hide_column" },
null,
null,
null,
null
]
} );
代码摘要from here
旧答案
尝试添加
"sClass": "hide_column"
应该隐藏该列...
答案 1 :(得分:10)
以丹尼尔的答案为基础:
css:
th.hide_me, td.hide_me {display: none;}
在datatables init中:
"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"
请记住将隐藏的类添加到您的thead单元格中:
<thead>
<th class="hide_me">First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</thead>
如果您正在使用服务器端处理并希望从ajax源传入数据而不在数据表中可见,那么这也是一种有用的策略。您仍然可以在前端检索列的值而无需显示它。通过隐藏数据值等进行过滤很有帮助。
示例:
// In datatables init file
<script>
var filteredValues = [];
$('td.your_filtering_class').each(function(){
var someVariable = $(this).find('.hide_me').html();
filteredValues.push(someVariable);
}
</script>
答案 2 :(得分:3)
如果要隐藏多个列:
$('#example').dataTable({
"columnDefs": [{
"targets": [0,1,3], //Comma separated values
"visible": false,
"searchable": false }
]
});
答案 3 :(得分:1)
这是我对你的贡献。
不确定代码是否正确但是它的工作。
如果您有多个像我这样的设置栏。
$('#example').dataTable( {
"columnDefs": [ {
"targets" : 'no-sort',
"orderable": false,
"order": [],
}],
"columnDefs": [ {
"targets" : 'hide_column',
"orderable": false,
"order": [],
"visible": false
}]
} );
答案 4 :(得分:-3)
您可以使用方法hide
。
$(element).hide();
要显示元素,请使用方法show
:
$(element).show();
要获取所需的列,可以使用jquery中的n-th child
选择器。