我需要隐藏一列以防止出现在 jquery 数据表中。当我使用 bVisible 属性隐藏列时,它会从 DOM 中消失。
我想将列的表格单元格的显示属性设置为无,以便值不会出现在视图中,但它们仍应存在于 DOM 中,因为我隐藏的列唯一地标识了行,我需要知道唯一的行选择的 ID。如何实现这一点。
我正在使用服务器端分页使用 aaData 属性填充表。
看过这个问题,但这些选项将其从 DOM 中删除。 jquery数据表隐藏列
我需要隐藏一列以防止出现在 jquery 数据表中。当我使用 bVisible 属性隐藏列时,它会从 DOM 中消失。
我想将列的表格单元格的显示属性设置为无,以便值不会出现在视图中,但它们仍应存在于 DOM 中,因为我隐藏的列唯一地标识了行,我需要知道唯一的行选择的 ID。如何实现这一点。
我正在使用服务器端分页使用 aaData 属性填充表。
看过这个问题,但这些选项将其从 DOM 中删除。 jquery数据表隐藏列
您应该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
]
} );
从这里获取的代码片段
旧答案
尝试添加
"sClass": "hide_column"
那应该使该列隐藏...
以丹尼尔的回答为基础:
CSS:
th.hide_me, td.hide_me {display: none;}
在数据表初始化中:
"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>
如果要隐藏多个列:
$('#example').dataTable({
"columnDefs": [{
"targets": [0,1,3], //Comma separated values
"visible": false,
"searchable": false }
]
});
这是我对你的贡献。
不确定代码是否正确,但它的工作。
如果你像我一样有不止一个设置栏。
$('#example').dataTable( {
"columnDefs": [ {
"targets" : 'no-sort',
"orderable": false,
"order": [],
}],
"columnDefs": [ {
"targets" : 'hide_column',
"orderable": false,
"order": [],
"visible": false
}]
} );
你可以使用方法hide
。
$(element).hide();
要显示元素,请使用方法show
:
$(element).show();
要获取所需的列,可以使用n-th child
jquery 中的选择器。