jQuery DataTables隐藏列而不从DOM中删除它

Question

我需要隐藏列在jquery数据表中显示.当我使用bVisible属性隐藏列时,它会从DOM中消失.

我想将列的表格单元格的显示属性设置为无,这样这些值不会出现在视图中,但是它们应该仍然存在于DOM中,因为我隐藏的列唯一地标识了行,我需要知道唯一的行选择ID.如何实现这一目标.

我使用服务器端分页使用aaData属性填充表.

看看这个问题,但这些选项将其从DOM中删除. jquery数据表隐藏列

Answer 1

您应该className与columnDefs或列一起使用,

hide_column像这样在你的CSS中定义类

.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"

应该隐藏该列...

Answer 2

以Daniel的答案为基础:

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>

Answer 3

如果你想隐藏多列：

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});