3
votes

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?

enter image description here

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

1

1 Answers

1
votes

DataTables sets this Show x to y from z text by default to

"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries"

and looking in the source code, the three placeholder just get replaced by internal variables. You may be able to alter them, but I don't know for sure and wouldn't suggest doing it doing it anyway.

If you want to change that info display, you could use some jQuery in your GridRowCount function, where you can access the total number of grouping rows via

$('.dataTables_wrapper').find('[id|=group-id]').length

Hope that helps.