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

I need to hide a column from showing up in jquery datatables. When I hide the column using bVisible property it disappears from the DOM.

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

I want to set display property of table cells of a column to none so that the values do not appear in the view but they should still be present in the DOM as the column I am hiding identifies the row uniquely and I need to know the unique ID on row select. How to achieve this.

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

I am populating the table using aaData property using server side pagination.

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

Had a look at this question but these options remove it from the DOM. jquery datatables hide column

看看这个问题，但这些选项将其从DOM中删除。 jquery datatables隐藏列

5 个解决方案

#1

You should use className along with the columnDefs or the columns,

您应该使用className以及columnDefs或列，

Define hide_column class in your css like this

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

.hide_column {
    display : none;
}

You have two ways to assign that .hide_column class:

您有两种方法来分配.hide_column类：

Use columnDefs (assign custom class to first column):

使用columnDefs（将自定义类分配给第一列）：

$('#example').DataTable( {
  columnDefs: [
    { targets: [ 0 ],
      className: "hide_column"
    }
  ]
} );

OR columns

OR列

$('#example').DataTable( {
  "columns": [
    { className: "hide_column" },
    null,
    null,
    null,
    null
  ]
} );

code snippets taken from here

从这里获取的代码片段

Old answer

老答案

Try adding

尝试添加

"sClass": "hide_column"

that should make that column hidden...

应该隐藏该列...

#2

To build on Daniel's answer:

以Daniel的答案为基础：

css:

CSS：

th.hide_me, td.hide_me {display: none;}

In datatables init:

在datatables init中：

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"

Remember to add your hidden class to your thead cell also:

请记住将您隐藏的类添加到您的thead单元格中：

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

This is also a useful strategy if you're using server-side processing and want to pass in data from the ajax source without it being visible in the datatable. You'll still be able to retrieve the column's value on the front-end without needing to display it. Helpful for filtering via hidden data values etc.

如果您正在使用服务器端处理并希望从ajax源传入数据而不在数据表中可见，那么这也是一种有用的策略。您仍然可以在前端检索列的值而无需显示它。有助于通过隐藏数据值等进行过滤

Example:

例：

// In datatables init file
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>

#3

If you want to hide multiple columns:

如果要隐藏多个列：

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

#4

this is my contribution for u.

这是我对你的贡献。

Not sure if the code is correct but its work.

不确定代码是否正确但是它的工作。

If u do have more than one setup column like me.

如果你有像我这样的多个设置栏。

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );

#5

-3

You can use the method hide.

您可以使用方法隐藏。

$(element).hide();

To show the element, use the method show:

要显示元素，请使用方法show：

$(element).show();

To get the column that you want, you can use n-th child selector from jquery.

要获取所需的列，可以使用jquery中的第n个子选择器。

#1