jquery 数据表隐藏列

Question

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

我弄清楚了如何重新加载表数据：使用

fnClearTable

和

fnAddData

。

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

Answer 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);

这是一个小提琴演示。

表格初始化时隐藏列

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

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

fnSetColumnVis( 1, false );

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

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

Answer 3

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

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

Answer 4

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

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

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"

//编辑：记得将隐藏类也添加到标题单元格中

Answer 6

有了api就可以使用

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

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

查看此信息：

在此输入链接描述

Answer 7

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

更多信息

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

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

Answer 8

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

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

Answer 9

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

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

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

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

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

这里，oTable 是 Datatable 的对象。

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

对于自动目标始终错误样式

        order: [],
        columns: [
            {data: "no", orderable: false},
            {data: "photo" },
            {data: "full_name" },
            {data: "nik" },
            {data: "position" },
            {data: "created_at"},
            {data: "action", className:"text-center"},
        ]

数据表 Codeigniter 4

Answer 13

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

Answer 14

看看我的解决方案

我有这个 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
        ]
    });
});

希望这对你有帮助