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 jasonblewis
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>
<table id="job_history">
<thead>
<tr>
<th>Person</th>
<th>Activity</th>
<th>Time</th>
<th>Date</th>
<th>Ticket</th>
<th>daily group</th>
<th>single job group</th>
<th>minutes to sum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>busy work</td>
<td>5 minutes</td>
<td>5/17/2013</td>
<td>12345</td>
<td>Job 1<br /><div id='group_sum'>0</div></td><!--daily group-->
<td>5/17/2013</td><!--single job group-->
<td class="minutes_to_sum">5</td><!--minutes to sum-->
</tr>
<tr>
<td>Paul</td>
<td>research</td>
<td>6 minutes</td>
<td>5/18/2013</td>
<td>12345</td>
<td>Job 1<br /><div id='group_sum'>0</div></td><!--daily group-->
<td>5/17/2013</td><!--single job group-->
<td class="minutes_to_sum">6</td><!--minutes to sum-->
</tr>
<tr>
<td>Peter</td>
<td>research</td>
<td>8 minutes</td>
<td>5/18/2013</td>
<td>12345</td>
<td>Job 2<br /><div id='group_sum'>0</div></td><!--daily group-->
<td>5/17/2013</td><!--single job group-->
<td class="minutes_to_sum">8</td><!--minutes to sum-->
</tr>
<tr>
<td>Mary</td>
<td>research</td>
<td>7 minutes</td>
<td>5/18/2013</td>
<td>12345</td>
<td>Job 2<br /><div id='group_sum'>0</div></td><!--daily group-->
<td>5/17/2013</td><!--single job group-->
<td class="minutes_to_sum">7</td><!--minutes to sum-->
</tr>
<tr>
<td>Peter</td>
<td>research</td>
<td>9 minutes</td>
<td>5/18/2013</td>
<td>12345</td>
<td>Job 2<br /><div id='group_sum'>0</div></td><!--daily group-->
<td>5/17/2013</td><!--single job group-->
<td class="minutes_to_sum">9</td><!--minutes to sum-->
</tr>
<tr>
<td>Mary</td>
<td>research</td>
<td>4...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
$(function() {
oTable = $('#job_history').dataTable({
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 4,5,6 ] },
],
"aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]],
"iDisplayLength" : -1,
"aaSortingFixed": [[ 5, 'asc' ]],
"aaSorting": [[ 5, 'asc' ]],
"bJQueryUI": true,
"sDom": '<flip>',
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}
// GROUP ROWS
var nTrs = $('#job_history tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for (var i = 0; i < nTrs.length; i++)
{
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 5 ];
if ( sGroup != sLastGroup )
{
var nGroup = document.createElement( 'tr' );
var nCell = document.createElement( 'td' );
nCell.colSpan = iColspan;
nCell.className = "group";
nCell.innerHTML = sGroup;
nGroup.appendChild( nCell );
nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
sLastGroup = sGroup;
}
}
// SUM COLUMNS WITHIN GROUPS
$('#job_history tbody tr:has(td.group)').each(function() {
var sum = 0;
$(this).nextUntil(':not(:has(td.minutes_to_sum))').each(function() {
console.log($(this));
...