24

我需要隐藏一列以防止出现在 jquery 数据表中。当我使用 bVisible 属性隐藏列时,它会从 DOM 中消失。

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

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

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

4

5 回答 5

46

您应该classNamecolumnDefscolumns一起使用,

像这样在你的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"

那应该使该列隐藏...

于 2013-01-17T07:03:25.163 回答
11

以丹尼尔的回答为基础:

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>
于 2013-08-30T22:48:02.707 回答
4

如果要隐藏多个列:

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});
于 2017-01-31T13:24:23.140 回答
0

这是我对你的贡献。

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

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

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );
于 2017-04-21T12:12:03.800 回答
-4

你可以使用方法hide

$(element).hide();

要显示元素,请使用方法show

$(element).show();

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

于 2013-01-17T05:24:15.273 回答