数据表 - 隐藏/显示列

Posted 2023-05-08

【中文标题】数据表 - 隐藏/显示列

【英文标题】：DataTables - Hide/Show Columns

【发布时间】：2016-09-10 22:25:58

【问题描述】：

我正在尝试使用 Bootstrap 的切换按钮（输入复选框）在 DataTables 中显示/隐藏列。我创建了一个功能链接，用于显示/隐藏列，但是当我应用了 class 和 data-column 他们不适用于 checkbox.. javascript是这样的：

                $('.toggle-vis').on('click', function (e) 
                    e.preventDefault();

                    // Get the column API object
                    var column = table.column($(this).attr('data-column'));

                    // Toggle the visibility
                    column.visible(!column.visible());
                );

<a class="toggle-vis" data-column="7">Colina</a>
<input type="checkbox" data-column="0" class="toggle-vis" onchange='OnOff(this, "Carboidrati");' data-label-text="Carboidrati" checked>

【问题讨论】：

贴出不起作用的代码，渲染出来的页面没有太大帮助

您必须包含您的“默认”状态，以确保可见性和复选框。它们充当您创建的任何状态更改的参考。如果您遵循基本规则，通常“切换”效果很简单。

复选框可见且状态已选中

Here is another solution: 在不知道列名的情况下连续显示/隐藏数据表的列，您也可以修复任何列并使所有更改持久化。还有一个是colVis

【参考方案1】：

哇，研究起来很有趣！！！。问题在于您的事件处理：为了“监听”您需要监听 switchChange.bootstrapSwitch 事件的开关，因此更改您的代码以监听该事件而不是 click 应该可以解决您的问题：

$('.toggle-vis').on('switchChange.bootstrapSwitch', function(event, state) 
    event.preventDefault();
    var column = table.column(~~$(this).attr('data-column'));
    column.visible( ! column.visible() );
);

工作JSFiddle，希望对您有所帮助。

【讨论】：

您好，请问一下，我是新手，对您的解决方案非常感兴趣，但我已应用您的脚本但未应用功能。 JSFiddle

@mastersuse：您没有包含相关库，并且您的标记有点混乱，应该可以：jsfiddle.net/annoyingmouse/tenL912o