I'm using Datatables to create a grouped by data grid. I was able to group my table.
I want to accomplish getting the total count of entries as the grouped row count and not as the total entries count, how would I go about doing that?
The highlighted part as in the above image should show "Showing 1 to 8 of 8 entries" since there are 8 groups.
Please refer my fiddle - http://jsfiddle.net/hh4kq5y0/
$(document).ready(function () {
$('#example').dataTable({
"bLengthChange": false,
"bPaginate": false,
"bJQueryUI": true
}).rowGrouping({
bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1,
asExpandedGroups: [""]
});
GridRowCount();
});
function GridRowCount() {
$('span.rowCount-grid').remove();
$('input.expandedOrCollapsedGroup').remove();
$('.dataTables_wrapper').find('[id|=group-id]').each(function () {
var rowCount = $(this).nextUntil('[id|=group-id]').length;
$(this).find('td').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': rowCount })));
});
$('.dataTables_wrapper').find('.dataTables_filter').append($('<input />', { 'type': 'button', 'class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expanded All Group' }));
$('.expandedOrCollapsedGroup').live('click', function () {
if ($(this).hasClass('collapsed')) {
$(this).addClass('expanded').removeClass('collapsed').val('Collapse All Group').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click');
}
else {
$(this).addClass('collapsed').removeClass('expanded').val('Expanded All Group').parents('.dataTables_wrapper').find('.expanded-group').trigger('click');
}
});
};
Thanks