Datatables row grouping - how to add rowcount per group and expand/collapse all

Datatables row grouping - how to add rowcount per group and expand/collapse all

by Akram kamal

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.js"></script>
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="display" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine</th>
            <th>CSS</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd_gradeX" id="2">
            <td class="read_only">Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center">4</td>

            <td class="center">X</td>
        </tr>
        <tr class="even_gradeC" id="4">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>

            <td class="center">C</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>

            <td class="center">A</td>
        </tr>
        <tr class="even_gradeA" id="1">
            <td>Trident</td>
            <td class="read_only">Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>

            <td class="center">A</td>
        </tr>
        <tr class="odd_gradeA" id="5">
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td class="read_only">Win XP SP2+</td>
            <td class="center">7</td>

            <td class="center">A</td>
        </tr>
       ...

CSS

.rowCount-grid
        {
            float: right;
            font-size: 15px;
            color: Red;
            padding-right: 250px;
        }
        
        tr:hover th, tr:hover td
        {
            background-color: #ebebeb;
            background-image: none;
        }
        td
        {
            height: 26px;
            padding: 0px 0px 0px 20px !important;
            text-align: left;
            border-bottom: 1px solid #d0d0d0;
            vertical-align: middle;
            color: #555555;
            background-color: #ffffff;
        }
        td.group
        {
            background-color: #d5eafd !important;
            border-bottom: 1px solid #94bafd;
            border-top: 1px solid #94bafd;
        }
        td.expanded-group
        {
            background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center transparent;
        }
        tr:hover td.expanded-group
        {
            background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/minus.jpg") no-repeat scroll left center #c0e1ff !important;
        }
        
        td.collapsed-group
        {
            background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center transparent;
        }
        tr:hover td.collapsed-group
        {
            background: url("http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/images/plus.jpg") no-repeat scroll left center #c0e1ff !important;
        }
        .DataTables_sort_wrapper span
        {
            float: right;
        }

JavaScript

$(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');
                }
            });
        };