can I get an example for this way of selecting row groups

umaeswara

https://datatables.net/reference/type/
has a table where I can click on the buttons and the table below is showing/hiding the contents accordingly.
can you please point me how to do this ? is there an example for the same.
I see column visibility examples, but i dont see grouping rows and making those groups visible or hide.
please guide.
thanks,
Uma-

kthorngren

I'm not familiar with the specific code for that page but it does look like it uses the RowGroup extension. The buttons on the page are likely performing a column().search() to filter the selections. Something similar to this example:
https://live.datatables.net/vipifute/1/edit

I updated that example to include RowGroup for the Office column. You can filter the Office locations, similar to the buttons at the page you linked, to filter the groups.
https://live.datatables.net/vipifute/863/edit

Kevin

umaeswara

thanks Kevin, seems this what I am looking for. though is it possible to do with Buttons like you have https://datatables.net/reference/type/ ?
And also I was unable to find what is the difference between
https://live.datatables.net/vipifute/1/edit and
https://live.datatables.net/vipifute/863/edit

thanks,
Uma-

allan

The buttons on that page simply activate a column search (column().search()) for the value indicated by the button. That happens to be the column that RowGroup is running on as well, hence it looks like it is searching by group, but really it is just a regular column search.

This is the code that I use for that:

            ref_table.column(0).data().unique().each( function (item, i) {
                var input = search.find('div.ref_input');

                input.append(
                    $('<a class="site-btn btn-inline small">'+item+'</a>')
                        .on( 'click', function () {
                            $(this).toggleClass('active');
                            
                            var items = input.find('.active').map( function () {
                                return $(this).text();
                            } ).toArray().join('|');

                            ref_table.column(0).search( items, true, false ).draw();
                        } )
                );
            } );

Column index 0 is the grouping data point. So it loops over the unique values in that, inserting a button for each value. Then the click listener will create a regex to do an OR search on the column for call activated buttons.

Allan

kthorngren

And also I was unable to find what is the difference between

The second test case simply has RowGroup added just to show the effect.

Kevin