Question

jquery datatables插件是否有办法隐藏（并显示）表格列？

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

但我的问题是，在我对该表的一个观点（例如隐藏模式）中，我不想显示某些列。

Answer 1

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

fnSetColumnVis( 1, false );

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

通过：http://www.datatables.net/api - 函数 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);

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] }
    ]
});

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

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

隐藏： fnSetColumnVis（1，false，false）;

示例： oTable.fnSetColumnVis（item，false，false）;

显示： fnSetColumnVis（1，true，false）;

示例： oTable.fnSetColumnVis（item，false，false）;

这里，oTable是Datatable的对象。

Answer 7

如果使用json中的数据并使用 Datatable v 1.10.19 ，则可以执行以下操作：

More info

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

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

Answer 8

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

Answer 9

使用api你可以使用

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

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

查看此信息：

enter link description here

Answer 10

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

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

Answer 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
                },
              ]
        });
    });

Answer 12

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

Target属性定义列的位置.Visible属性负责列的可见性.Searchable属性负责搜索功能。如果将其设置为false，则该列不适用于搜索。

Answer 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 index [0]和RegistrationStatusId index [5]

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

我希望这会对你有所帮助

jquery数据表隐藏列

13 个答案:

动态隐藏列

初始化表时隐藏列