Question

我正在尝试使用Bootstrap的Switch Buttons（输入复选框）显示/隐藏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>

Answer 1

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，希望有所帮助。

DataTables - 隐藏/显示列

1 个答案: