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

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<div class="full_width">
<div class="column_select"></div>    
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width:980px">
	<thead>
		<tr>
			<th>Rendering engine</th>

			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rendering engine</th>

			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
	<tbody>

		<tr class="gradeA">
			<td>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="gradeA">
			<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="gradeA">
			<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="gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			<td class="center">A</td>

		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
			<td class="center">7</td>
			<td class="center">A</td>

		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
			<td class="center">6</td>
			<td class="center">A</td>

		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>
			<td...

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: red;
        }
        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

$(function() {
var oTable = $('#example').dataTable({ "bLengthChange": false, "bPaginate": false})
				  .rowGrouping({	bExpandableGrouping: true,
									asExpandedGroups: ["Other Browsers", "Trident"],
									fnOnGrouped: function() { alert('Rows are regrouped!'); }
							   });
var tblcolumns = [];							   
var tableSettings = oTable.fnSettings();
$.map( tableSettings.aoColumns, function(val, i) {
	if ( val['sTitle']) {
		tblcolumns.push({"id": i,"name": val['sTitle']});
	}
	});
$(tblcolumns).each(function(i,col) {
	var label = "<label for=\"cols_group"+i+"\">"+col.name+"</label>";
	var  checkbox = "<input id=\"cols_group"+i+"\" type=\"checkbox\" name=\"columns_group\" value=\""+col.id+"\" />";
	$('.column_select').append(label+checkbox);
});


$('.column_select input[name="columns_group"]').change(function() {

if($(this).is(':checked')) {
    var ogroups = oTable.dataTableExt.aoGroups;
  
	if(oTable != null) oTable.fnDestroy();
    console.log(ogroups)
    $.each(ogroups,function(i,group) {
        console.log(group);
        group.nGroup.remove()
    });    
	$('.column_select input[name="columns_group"]').not(this).attr('checked',false);
} else {
	
	$('.column_select input[name="columns_group"]').attr('checked',false);
}
});
			    
			});