CODEWITHSUNDEEP
javascriptjquerydatatables
Dineshcoffee
Dineshcoffee

Reputation: 11

Column visibility toggle buttons for two groups outside of table

My DataTable is making use of Visibility toggle buttons and everything is working fine, however I would like to "categorize" my columns and buttons, please see below.

example

We have five columns in total, and at the left we have a sidebar with categories Vegetable and Fruits. The issue here is that I can't seem to categorize the buttons, DataTables is using some default option

buttons: [
    'columnsToggle'   
],

Which means I can't separate the buttons into Fruits and Vegetables.

Upvotes: 1

Views: 453

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58860

You can do that by assigning different classes to th elements in the header, for example group1 for fruits and group2 for vegetables.

Then use the code below to create two sets of column visibility buttons and insert them into appropriate button containers.

For example:

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

See this example for code and demonstration.

Upvotes: 1

Related Questions