jquery数据表隐藏列

Question

有没有办法用jquery datatables插件隐藏(和显示)表列？

我想出了如何重新加载表数据:使用fnClearTable和fnAddData.

但我的问题是,在我对表的一个视图中(例如隐藏模式)我不想显示某些列.

Answer 1

您可以通过此命令隐藏列:

fnSetColumnVis( 1, false );

第一个参数是列的索引,第二个参数是可见性.

通过:http://www.datatables.net/api - function fnSetColumnVis

Answer 2

如果有人再次进入这里,这对我有用......

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]

Answer 3

动态隐藏列

之前的答案是使用遗留DataTables语法.在v 1.10+中,您可以使用column().visible():

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

要隐藏多个列,可以使用columns().visible():

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

这是一个小提琴演示.

初始化表时隐藏列

要在初始化表时隐藏列,可以使用columns选项:

$('#example').DataTable( {
    'columns' : [
        null,
        //hide the second column
        {'visible' : false },
        null,
        //hide the fourth column
        {'visible' : false }
    ]
});

对于上述方法,您需要指定null应保持可见且未指定其他列选项的列.或者,您可以使用columnDefs来定位特定列:

$('#example').DataTable( {
    'columnDefs' : [
        //hide the second & fourth column
        { 'visible': false, 'targets': [1,3] }
    ]
});

Answer 4

您可以在数据表初始化期间定义它

"aoColumns": [{"bVisible": false},null,null,null]

Answer 5

对于任何使用服务器端处理并使用隐藏列将数据库值传递到jQuery的人,我建议使用"sClass"参数.您将能够使用css display:none来隐藏列,同时仍能够检索其值.

CSS:

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

在datatables init中:

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

//编辑:记得将隐藏的类添加到你的单元格中

Answer 6

通过 api，您可以使用

var table = $('#example').DataTable();

table.column( 0 ).visible( false );

看一下这个信息：

在此输入链接描述

Answer 7

var example = $('#exampleTable').DataTable({
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});

Target 属性定义列的位置。Visible 属性负责列的可见性。Searchable 属性负责搜索功能。如果设置为 false，则该列无法进行搜索。

Answer 8

如果使用来自 json 的数据并使用Datatable v 1.10.19，您可以这样做：

更多信息

$(document).ready(function() {
     $('#example').dataTable( {

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});