colvis with groups of columns

jsilver

I'm trying to do column visibility with grouping. I currently have:

$(document).ready(function() {
        var table = $('#table1').DataTable( {
                fixedHeader: true,
                dom: 'Blftrip',
                buttons: [
                {       
                   columns: [1,2,3,4,5] ,
                   extend: 'colvis',
                   text: 'Toggle Column Sets',
                }
        ]
 } );
} );

When I press the "Toggle Column Sets" button, it currently gives me the option of toggling each of the columns 1-5 individually. I want it so that when I press "Toggle Column Sets", it instead gives my an option to toggle [1,2] or [3,4,5] as groups.

What's the easiest way to do this?
Thanks.

colin

This example should help, it's showing the same thing.

Colin

jsilver

Thanks. I had looked at that previously and it is similar but not the same thing. It's different because I need:

-a single control with a dropdown... not a bunch of different buttons
-toggle functionality for each of the groups (e.g. selecting [1,2] from the visibility dropdown should add/delete the columns 1&2 but shouldn't affect columns [3,4,5].)

Apologies if my terminology is incorrect.

colin

Ah, yep, that's a collection, see this example here.

Colin

jsilver

Thanks Colin. That helped. I think I'm close now with the code below. However, colvis would change the color of the dropped-down buttons depending on whether the columns (e.g. [1,2]) were visible or not. With the code i have below, you can't tell by looking at the drop down the state of the column visibility.

$(document).ready(function() {
        var table = $('#table1').DataTable( {
                fixedHeader: true,
        dom: 'Blftrip',
        buttons: [
            {   
                text: 'Table control',
                extend: 'collection',
                buttons: [
                    {   
                        text: 'Toggle 1-2',
                        action: function ( e, dt, node, config ) { 
                            dt.column( 1 ).visible( ! dt.column( 1 ).visible() );
                            dt.column( 2 ).visible( ! dt.column( 2 ).visible() );
                        }
                    },  
                    {   
                        text: 'Toggle 3-5',
                        action: function ( e, dt, node, config ) { 
                            dt.column( 3 ).visible( ! dt.column( 3 ).visible() );
                            dt.column( 4 ).visible( ! dt.column( 4 ).visible() );
                            dt.column( 5 ).visible( ! dt.column( 5 ).visible() );
                        }
                    },
                ]
            },  
        
        
        ]       


 } );
} );

colin

You can use button().active() for that, so this.active(true) in the action function.

Colin

jsilver

Thank you for your help Colin. That worked perfectly. Here's the final code in case someone comes across this in the future:

$(document).ready(function() {
        var table = $('#table1').DataTable( {
                fixedHeader: true,
        dom: 'Blftrip',
        buttons: [
            {  
                text: 'Table control',
                extend: 'collection',
                buttons: [
                    {  
                        text: 'Toggle 1-2',
                        action: function ( e, dt, node, config ) {
                            dt.column( 1 ).visible( ! dt.column( 1 ).visible() );
                            dt.column( 2 ).visible( ! dt.column( 2 ).visible() );
                            this.active(!this.active());
                        }
                    }, 
                    {  
                        text: 'Toggle 3-5',
                        action: function ( e, dt, node, config ) {
                            dt.column( 3 ).visible( ! dt.column( 3 ).visible() );
                            dt.column( 4 ).visible( ! dt.column( 4 ).visible() );
                            dt.column( 5 ).visible( ! dt.column( 5 ).visible() );
                            this.active(!this.active());
                        }
                    },
                ]
            }, 
         
         
        ]      
 
 
 } );
} );