Question

我正在使用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列。我想在点击按钮时显示此列。有谁可以帮助我实现这个目标？

提前致谢。

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

Answer 2

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

请注意，也许你需要再次渲染表，因为它在处理不完整的表时遇到问题，功能可能会被截断，我会回来查看更多信息。

单击Datatable中的按钮时显示列

2 个答案: