jquery数据表隐藏列答案

【问题标题】：jquery datatables hide columnjquery数据表隐藏列
【发布时间】：2011-08-05 00:10:36
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

动态隐藏列

之前的答案使用的是旧版 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);

Here is a Fiddle Demo.

表初始化时隐藏列

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

【讨论】：

也可以使用columns.visible 选项来完成。如果您希望您的回答彻底，我也会提到这一点。
这是一个很棒的更新，但我指的是选项columns,visible，请参阅datatables.net/reference/option/columns.visible
@Gyrocode.com - 啊哈，是的。我在想动态可见性。我添加了有关在 init 上隐藏列的详细信息。
这很好，但一个问题是如果可见为假，nRow 会在编辑/取消时忽略隐藏列。
回发时如何访问隐藏列的值？谢谢

【解决方案2】：

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

fnSetColumnVis( 1, false );

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

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

【讨论】：

我真的希望数据表 API 站点将每个方法放在不同的页面上——这样可以更轻松地在 Google 上查找特定的方法。
@Blazemonger：有锚点，方便访问：datatables.net/api#fnSetColumnVis
@RobotMess Anchors 可以供人类链接，但 Google 搜索结果只会显示在页面顶部。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

"aoColumns": [{"bVisible": false}] 对我来说已经足够了（没有空值）。
@Gerry_Gurevich 部分正确。在此示例中，第一列获取属性"bVisible": false，而表中的所有其他列未传递任何参数。这是因为当您使用"aoColumns": [ ... ] 时，您必须发送表中所有列的逗号分隔列表。如果您改用"aoColumnDefs": [ ... ]（请参阅@ahaliav_fox 的答案），您只需声明一个列索引数组即可应用该属性。因此，无论是否获得属性，您都不需要声明每一列的状态。

【解决方案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"

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

【讨论】：

【解决方案6】：

有了你可以使用的api

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

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

看看这个信息：

enter link description here

【讨论】：

【解决方案7】：

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

More info

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

隐藏： fnSetColumnVis（1，假，假）；

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

显示： fnSetColumnVis（1，真，假）；

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

这里，oTable是Datatable的对象。

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

希望这会对您有所帮助。我正在使用此解决方案在某些列上进行搜索，但我不想在前端显示它们。

$(document).ready(function() {
        $('#example').dataTable({
            "scrollY": "500px",
            "scrollCollapse": true,
            "scrollX": false,
            "bPaginate": false,
            "columnDefs": [
                { 
                    "width": "30px", 
                    "targets": 0,
                },
                { 
                    "width": "100px", 
                    "targets": 1,
                },
                { 
                    "width": "100px", 
                    "targets": 2,
                },              
                { 
                    "width": "76px",
                    "targets": 5, 
                },
                { 
                    "width": "80px", 
                    "targets": 6,
                },
                {
                    "targets": [ 7 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 8 ],
                    "visible": false,
                    "searchable": true
                },
                {
                    "targets": [ 9 ],
                    "visible": false,
                    "searchable": true
                },
              ]
        });
    });

【讨论】：

【解决方案12】：

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
});});

【讨论】：

【解决方案13】：

看看我的解决方案

我有这个 HTML table Head

<thead>
    <tr>
        <th style="width: 20%">@L("Id")</th>
        <th style="width: 20%">@L("IdentityNumber")</th>
        <th style="width: 20%">@L("Name")</th>
        <th style="width: 20%">@L("MobileNumber")</th>
        <th style="width: 20%">@L("RegistrationStatus")</th>
        <th style="width: 20%">@L("RegistrationStatusId")</th>
        <th style="width: 20%; text-align: center;" data-hide="phone">@L("Actions")</th>
    </tr>
</thead>

而我的Ajax request 则返回了类似的内容

所以我想隐藏 ID 索引 [0] 和 RegistrationStatusId 索引 [5]

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            { "aTargets": [0, 5], "sClass": "invisible"},// here is the tricky part
        ]
    });
});

希望对你有帮助

【讨论】：