单击Datatable中的按钮时显示列

Posted 2021-04-11

我正在使用Datatable - JQuery的表插件 - 如下：

$('#my_table').DataTable({
    ...,

    "aoColumns": [
        {"bSortable": false,
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            } 
        },
        {"bSortable": false},
        {"bSortable": false},
        {"bSortable": false},
        {"bSortable": true, bVisible:false}, /* to hide */
        {"bSortable": false},
    ],
    ...
});

正如人们在代码中看到的那样，第5列是隐藏的。我想在点击按钮时显示此列。有谁能帮助我实现这个目标？

提前致谢。

答案

您可以隐藏/显示列，如下所示：

$("#btn").click(function() {
    var table = $('#my_table').DataTable();
    table.column(4).visible(true);
});

另一种方式是

$("#btn").click(function() {
    var table = $('#my_table').DataTable();
    table.fnSetColumnVis( 4, true );
});

另一答案

您可以在按钮中添加外部事件，如.onClick（'element'），或将其附加到侦听和更改bVisible属性的行标识符，或者，您也可以在object属性中包含一个回调函数来执行更改：{"bSortable": true, bVisible:function(){/*listen to click event on a specific element*/}},

请注意，也许你需要再次渲染表，因为它处理不完整的表有困难，功能可能被截断，我会得到更多的信息。