javascript - 表外两组的列可见性切换按钮

Question

我的数据表正在使用 Visibility toggle buttons一切正常，但我想“分类”我的列和按钮，请参见下文。

我们总共有五列，在左侧我们有一个边栏，其中包含蔬菜和水果类别。这里的问题是我似乎无法对按钮进行分类，DataTables 使用了一些默认选项

buttons: [
    'columnsToggle'   
],

这意味着我无法将按钮分为水果和蔬菜。

Answer 1

您可以通过为 header 中的 th 元素分配不同的类来实现这一点，例如，group1 用于水果，group2 用于蔬菜。

然后使用下面的代码创建两组列可见性按钮并将它们插入适当的按钮容器中。

例如:

$(document).ready(function (){
    var table = $('#example').DataTable();   

    var buttons1 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group1'
            }, 
        ]
    }).container().appendTo($('#buttons-group1'));

    var buttons2 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group2'
            }, 
        ]
    }).container().appendTo($('#buttons-group2'));
});

参见 this example用于代码和演示。