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

jQuery DataTables hide column without removing it from DOM

提问by Rohit Banga

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 数据表隐藏列

回答by Daniel

You should use classNamealong with the columnDefsor the columns,

您应该className与columnDefs或columns一起使用，

Define hide_columnclass in your css like this

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

.hide_column {
    display : none;
}

You have two ways to assign that .hide_columnclass:

您有两种方法可以分配.hide_column该类：

Use columnDefs(assign custom class to first column):

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

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

OR columns

或者 columns

$('#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...

这应该使该列隐藏...

回答by DrewT

To build on Daniel's answer:

以丹尼尔的回答为基础：

css:

css：

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

In 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>

回答by Jyotirmaya Prusty

If you want to hide multiple columns:

如果要隐藏多列：

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

回答by user7901356

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
    }]
} );

回答by William Seiti Mizuta

You can use the method hide.

您可以使用该方法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 childselector from jquery.

要获取所需的列，您可以使用n-th childjquery 中的选择器。