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

vcirk6k6  于 12个月前  发布在  jQuery
关注(0)|答案(5)|浏览(111)

我需要隐藏一个列,使其不会出现在jquery数据表中。当我使用bVisible属性隐藏该列时,它会从DOM中消失。
我想将一列的表格单元格的display属性设置为none,这样值就不会出现在视图中,但它们仍然应该出现在DOM中,因为我隐藏的列唯一地标识了行,我需要知道行选择的唯一ID。如何实现这一点。
我使用aaData属性使用服务器端分页填充表。
看了一下这个问题,但这些选项将其从DOM中删除。jquery datatables hide column

dz6r00yl

dz6r00yl1#

您应该将className沿着与columnDefscolumns一起使用,
在你的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
  ]
} );


代码片段from here

  • 古老的答案 *

尝试添加

"sClass": "hide_column"


应该能让那列隐藏起来

w6lpcovy

w6lpcovy2#

根据丹尼尔的回答:
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"


记住把你的隐藏类也添加到你的head单元格中:

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


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

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

r3i60tvu

r3i60tvu3#

如果您想隐藏多个列:

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

字符串

6jjcrrmo

6jjcrrmo4#

这是我对你的贡献。
不知道代码是否正确,但它的工作。
如果你有一个以上的设置栏像我一样。

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

字符串

z18hc3ub

z18hc3ub5#

可以使用hide方法。

$(element).hide();

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

$(element).show();


要获取所需的列,可以使用jquery中的n-th child selector。

相关问题