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!!
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
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;
}
