Question

如果选中了复选框，我想让列可见。我有这个功能：

function SaveTableSettings() {
    var notChecked = [], checked = [];
    var table = $('#data-table');
    $(":checkbox").each(function() {
        if(this.checked){
            checked.push(this.id);

        } else {
            notChecked.push(this.id);
        }
});

我想使用＆＃34;检查＆＃34;的元素。数组并使用此函数更改相应的列可见性：

if (dataTableId == "data-table"&&toShow.length<1) {
    alert("in if");
    table.column(1).visible(false);
    table.column(2).visible(false);
    table.column(3).visible(false);
    table.column(4).visible(false);
} else {
    for (i = 0; i < toShow.length; i++) {

    }
}

其中＆＃34; toShow＆＃34;与＆＃34;检查＆＃34;是相同的数组我把它作为参数传递给我。我想让数组中的列可见。但我不知道在for循环中该做什么。谢谢你的帮助

Answer 1

您可以将Buttons extension用于此目的，更准确地说，您应该使用the column visibility plug-in for Buttons。

以下是基本用法示例：

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    } );
} );

您必须包含相关的JavaScript文件，例如：

或者，使用Download builder并将DataTables包含在按钮和列可见性模块中。

p.s如果你使用旧的数据表（1.9.x，你应该使用ColVis extension

Answer 2

如果没有标记/ HTML，很难调试你的代码，但对我而言，似乎你似乎正在尝试使用大锤来破解坚果。

而不是.menu＆＃39; s（？）只需使用属性将复选框绑定到某个列：

id

在你的<input type="checkbox" data-column="0" checked/>或其他任何地方：

SaveTableSettings()

小型演示 - ＆gt;的 http://jsfiddle.net/c0o48jmv/1/

上述内容可以很容易地更改为目标$("[data-column]").each(function() { table.column($(this).data('column')).visible($(this).is(':checked')); })而不是列索引。只需将id添加到id
中即可
<th>

并参考那些<th id="col0">columnHeader</th>而不是索引

id

<强> http://jsfiddle.net/d9q06cg0/

如何在javascript中按列ID更改列可见性？

2 个答案: