数据表-隐藏/显示列

DataTables - Hide/Show Columns

本文关键字：显示 隐藏 数据表      更新时间：2023-09-26

我正在尝试使用Bootstrap的切换按钮（输入复选框）显示/隐藏DataTables中的列。。我创建了一个功能性的链接，可以显示/隐藏列，但当我应用类和数据列时，它们不适用于复选框。。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>

Wowser，研究起来很有趣！！！。问题是您的事件处理：为了"监听"交换机，您需要监听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，希望能有所帮助。

相关文章：