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

我的数据表正在使用，一切都正常，但是我想“分类”我的列和按钮，请参阅下面

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

buttons: [
    'columnsToggle'   
],

---

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

您可以通过为标题中的

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'));
});

---

有关代码和演示，请参阅。

@dineshcafee，您可以将答案标记为已接受（通过单击复选标记），这可能对未来的读者有所帮助。