单击数据表中的按钮时显示列答案

【问题标题】：Display column on click of button in Datatable单击数据表中的按钮时显示列
【发布时间】：2018-06-14 21:59:10
【问题描述】：

我正在使用 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 列是隐藏的。我想在单击按钮时显示此列。谁能帮我实现这个目标？

提前致谢。

【问题讨论】：

标签： jquery html-table datatables click

【解决方案1】：

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

$("#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 );
});

【讨论】：

【解决方案2】：

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

请注意，您可能需要再次渲染表格，因为它无法处理不完整的表格并且功能可能会被截断，我会回来提供更多信息。

【讨论】：