表格外两个组的列可见性切换按钮

Question

我的DataTable正在使用Visibility toggle buttons并且一切正常，但我希望＆＃34;分类＆＃34;我的栏目和按钮，请参见下文。

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

buttons: [
    'columnsToggle'   
],

这意味着我可以将按钮分成水果和蔬菜。

Answer 1

您可以通过为标题中的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以获取代码和演示。