Javascript jquery 数据表隐藏列

jquery datatables hide column

提问by john

Is there a way with the jquery datatables plugin to hide (and show) a table column?

jquery 数据表插件有没有办法隐藏（和显示）表列？

I figured out how to reload the table data: using fnClearTableand fnAddData.

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

But my issue is that in one of my views for the table (e.g. a hidden mode) I don't want to show certain columns.

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

采纳答案by Damb

You can hide columns by this command:

您可以通过以下命令隐藏列：

fnSetColumnVis( 1, false );

Where first parameter is index of column and second parameter is visibility.

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

Via: http://www.datatables.net/api- function fnSetColumnVis

通过：http: //www.datatables.net/api- 函数fnSetColumnVis

回答by ahaliav fox

if anyone gets in here again this worked for me...

如果有人再次来到这里，这对我有用...

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

回答by devlin carnate

Hide columns dynamically

动态隐藏列

The previous answers are using legacy DataTables syntax. In v 1.10+, you can use column().visible():

以前的答案使用旧的 DataTables 语法。在 v 1.10+ 中，您可以使用column().visible()：

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

To hide multiple columns, columns().visible()can be used:

要隐藏多列，可以使用columns().visible()：

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

Here is a Fiddle Demo.

这是一个小提琴演示。

Hide columns when the table is initialized

表初始化时隐藏列

To hide columns when the table is initialized, you can use the columnsoption:

要在表初始化时隐藏列，您可以使用columns选项：

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

For the above method, you need to specify nullfor columns that should remain visible and have no other column options specified. Or, you can use columnDefsto target a specific column:

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

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

回答by Pankaj Patel

You can define this during datatable initialization

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

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

回答by DrewT

For anyone using server-side processing and passing database values into jQuery using a hidden column, I suggest "sClass" param. You'll be able to use css display: none to hide the column while still being able to retrieve its value.

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

css:

css：

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

In datatables init:

在数据表初始化中：

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

//EDIT: remember to add your hidden class to your thead cell also

//编辑：记得把你的隐藏类也添加到你的 thead 单元格中

回答by Alex Montoya

If use data from json and use Datatable v 1.10.19, you can do this:

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

More info

更多信息

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

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

回答by goero_ag

With the api you can use

使用 api 您可以使用

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

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

Look this info:

看看这个信息：

enter link description here

在此处输入链接描述

回答by Nimesh

You can try as below to hide/show dynamically runtime

您可以尝试如下动态隐藏/显示运行时

Hide: fnSetColumnVis( 1, false, false );

隐藏： fnSetColumnVis( 1, false, false );

Example:oTable.fnSetColumnVis(item, false,false);

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

Show: fnSetColumnVis( 1, true, false );

显示： fnSetColumnVis( 1, true, false );

Example:oTable.fnSetColumnVis(item, false,false);

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

Here, oTable is object of Datatable.

这里，oTable 是 Datatable 的对象。

回答by Susampath

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

Target attribute defines the position of the column.Visible attribute responsible for visibility of the column.Searchable attribute responsible for searching facility.If it set to false that column doesn't function with searching.

Target 属性定义列的位置。Visible 属性负责列的可见性。Searchable 属性负责搜索工具。如果设置为 false，则该列不具有搜索功能。

回答by Bhaulik

Note: the accepted solution is now outdated and part of legacy code. http://legacy.datatables.net/refThe solutions might not be appropriate for those working with the newer versions of DataTables (its legacy now) For the newer solution: you could use: https://datatables.net/reference/api/columns().visible()

注意：接受的解决方案现在已经过时并且是遗留代码的一部分。http://legacy.datatables.net/ref这些解决方案可能不适合那些使用较新版本的 DataTables（现在是旧版本）的人对于较新的解决方案：您可以使用：https: //datatables.net/reference/ api/列（）。可见（）

alternatives you could implement a button: https://datatables.net/extensions/buttons/built-inlook at the last option under the link provided that allows having a button that could toggle column visibility.

您可以实现按钮的替代方案：https: //datatables.net/extensions/buttons/built-in查看提供的链接下的最后一个选项，该选项允许使用可以切换列可见性的按钮。