0

I am using Datatables Collapsible/Expandable Grouping.

I have configured it so that all groups collapsed in the initial view. Thanks to ThulasiRam's help, I've integrated group rowcount and collapse/expand all features. Datatables row grouping - how to add rowcount per group and expand/collapse all

I would like to configure the table search to automatically expand groups with rows matching the search, instead of the only the matching groups.

I'd also like to add a reset button to the table search. I've managed to add the "X" button, but I haven't found the way to set click function correctly so that it will reset the table search field.

I've set up a jsfiddle to show what I'm trying to accomplish: http://jsfiddle.net/lbriquet/SBdJd/9/

Any help would really be appreciated!!

Community
  • 1
  • 1
lbriquet
  • 541
  • 3
  • 12
  • 27

2 Answers2

1

Ok i got it turns out you were using the private functions not the public ones, see here

Another issue is you need to keep a reference to your datatable to use its functions. heres the answer

AbstractChaos
  • 4,211
  • 1
  • 19
  • 28
  • Thank you very much for your help on the searchbox reset button! It works fine... except that the text on the Expand/Collapse all button is also cleared when you press the reset button. – lbriquet Jun 08 '12 at 13:19
  • Thats due to the filter clear ripping it out i looking at it now – AbstractChaos Jun 08 '12 at 13:25
  • The search box reset works PERFECTLY!!! Thank you very much for your help!!! This is really helpful and makes using the search much more user friendly. Do you have any ideas on how to get the search to expand the groups with matching rows? It seems more logical to directly show what the matches are. The expand all work to do this, I was hoping to find away to call the expand all once the search box is used. – lbriquet Jun 08 '12 at 14:43
  • yes use `ref.live('filter',function(){//code here}); to listen to the event. I was also adding a delay to make sure it completed. If this answer helped please make sure to make as such :) – AbstractChaos Jun 08 '12 at 14:54
  • IT WORKS! THANK YOU for your work. There are some problems though. The reset searchbox button expands all groups, which is unexpected. Is it possible to return to previous state or collapse all? Clicking again on reset button toggles the expand/collapse button name. Sometimes the delay long and it seems to flicker between expand and collapse. Also, if you type something in the search filter, "win" for example, and then decide to add some more text to further filter, "win" add " 98"... it collapses to the groups instead of showing the matching rows. What do you think? – lbriquet Jun 08 '12 at 22:13
  • Ok i made the change which should give you pretty much what your after. [here](http://jsfiddle.net/SBdJd/17/) – AbstractChaos Jun 11 '12 at 09:52
0

I love the collapse all and expand all button works great!

I had to modify it a bit to support the latest version of jquery

var source = j$('div[id=myTable_filter]')[0];
var source2 = j$('div[id=myTable_filter]')[0].firstChild;
var divToadd = j$('<div>', {'id': 'dtsearch_filter'})
j$(source2).wrapAll(divToadd);
var htmlToadd = j$('<input />', {'type': 'button','class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expand All' })
j$(htmlToadd).prependTo(source);

j$('.expandedOrCollapsedGroup').click(function() {
if (j$(this).hasClass('collapsed')) {
j$(this).addClass('expanded').removeClass('collapsed').val('Collapse All').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click');
}
else {
j$(this).addClass('collapsed').removeClass('expanded').val('Collapse All').parents('.dataTables_wrapper').find('.expanded-group').trigger('click');     
}
});

plus these style settings .expandedOrCollapsedGroup { width: 125px; float: left; } .dataTables_filter { float: none; } .dtsearch_filter{ float: right; }

ktg
  • 1