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

Question

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

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

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

查看了这个问题，但这些选项将其从 DOM 中删除。 jquery 数据表隐藏列

Answer 1

您应该将

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"

这应该使该列隐藏...

Answer 2

以丹尼尔的答案为基础：

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

Answer 4

这是我对你的贡献。

不确定代码是否正确，但它可以工作。

如果你像我一样有不止一个设置栏。

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

Answer 5

您可以点击下面的链接。我希望它能帮助您解决您的问题。

https://datatables.net/examples/api/tabs_and_scrolling.html

Answer 6

可以使用方法

hide

。

$(element).hide();

要显示元素，请使用方法

show

:

$(element).show();

要获取所需的列，您可以使用 jquery 中的

n-th child

选择器。