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

Posted 2023-05-09

【中文标题】单击数据表中的按钮时显示列

【英文标题】：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 列是隐藏的。我想在单击按钮时显示此列。谁能帮我实现这个目标？

提前致谢。

【参考方案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*/,

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