jQuery数据表格隐藏列

Question

使用jQuery Datatables插件，有没有一种方法可以隐藏（和显示）表格列？

我找到了重新加载表格数据的方法：使用fnClearTable 和 fnAddData。

但我的问题是，在表格的某个视图中（例如隐藏模式），我不想显示某些列。

- john

Answer 1

动态隐藏列

以前的答案使用的是旧版DataTables的语法。在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);

这里是一个演示的 Fiddle。

初始化表格时隐藏列

要在初始化表格时隐藏列，您可以使用 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] }
    ]
});

- devlin carnate

---

这也可以通过columns.visible选项完成。如果您希望您的答案更加全面，我也会提到它。 - Gyrocode.com

那是很好的更新，但是我指的是选项 columns.visible，请参见 https://datatables.net/reference/option/columns.visible - Gyrocode.com

@Gyrocode.com - 哦，是的。我在考虑动态可见性。我已经添加了有关在初始化时隐藏列的详细信息。 - devlin carnate

这很好，但是一个问题是如果 visible 为 false，nRow 在编辑/取消时会忽略隐藏列。 - JoshYates1980

当我们进行回传时，如何访问隐藏列的值？谢谢。 - singhswat

Answer 2

您可以使用以下命令隐藏列：

fnSetColumnVis( 1, false );

第一个参数是列的索引，第二个参数是可见性。

来源： http://www.datatables.net/api - 函数 fnSetColumnVis

- Damb

---

我希望 datatables API 网站能够将每种方法放在不同的页面上，这样更容易通过谷歌搜索到想要找的特定方法。 - Blazemonger

@Blazemonger：有锚点，方便访问：http://www.datatables.net/api#fnSetColumnVis - Robot Mess

@RobotMess 锚点对于人类链接来说很好，但是谷歌搜索结果只会跳转到页面顶部。 - Blazemonger

Answer 3

如果还有其他人遇到同样的问题，这对我有效...

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

- ahaliav fox

Answer 4

在datatable初始化期间，您可以定义这个。

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

- Pankaj Patel

---

"aoColumns": [{"bVisible": false}] 对我来说已经足够了（无需空值）。 - Gerry Gurevich

@Gerry_Gurevich部分正确。在这个例子中，第一列获取属性“bVisible：false”，而表格中的所有其他列都没有传递任何参数。这是因为当您使用“aoColumns：[...]”时，必须发送表格中所有列的逗号分隔列表。如果您改用“aoColumnDefs：[...]”（请参见@ahaliav_fox的答案），则只需要声明一个列索引数组即可应用该属性。因此，您不需要声明每一列的状态是否获得该属性。 - DrewT

Answer 5

对于使用服务器端处理并通过隐藏列将数据库值传递到jQuery的任何人，我建议使用“sClass”参数。您可以使用css display:none隐藏列，同时仍然能够检索其值。

css：

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

在数据表初始化中：

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

//编辑：记得将你的“hidden”类添加到thead单元格中

- DrewT

Answer 6

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

更多信息

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

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

- Alex Montoya

Answer 7

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

Target 属性定义了列的位置。Visible 属性负责控制列是否可见。Searchable 属性负责控制搜索功能是否可用。如果设置为 false，该列不能被搜索。

- Susampath

---

对我很有帮助，感谢答案。 - Newbee

Answer 8

使用API可以实现以下功能：

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

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

查看以下信息:

单击此处

（Note: 本句只是提醒，请忽略）

- goero_ag

Answer 9

你可以尝试以下方法在运行时动态隐藏/显示：

隐藏： fnSetColumnVis(1,false, false); 示例：oTable.fnSetColumnVis(item,false,false);

显示： fnSetColumnVis(1,true, false); 示例：oTable.fnSetColumnVis(item,false,false);

这里的oTable是Datatable对象。

- Nimesh

Answer 10

注意：接受的解决方案现已过时，是遗留代码的一部分。http://legacy.datatables.net/ref这些解决方案可能不适用于使用新版本DataTables的人（它现在是遗留的）。 对于新的解决方案： 您可以使用： https://datatables.net/reference/api/columns().visible() 作为替代方案，您可以实现一个按钮：https://datatables.net/extensions/buttons/built-in查看提供的链接下的最后一个选项，允许有一个可以切换列可见性的按钮。

- Bhaulik