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.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table class="table table-bordered blue-fade-table nomargin" id="example">
<thead>
<tr>
<th class="text-center w1p">
<input type="checkbox" class="chk1">
</th>
<th class="w1p"><a href="" class="green-expand1 collapsed"></a>
</th>
<th class="w5p">Priority</th>
<th class="w1p text-center"><i class="icon icon-redexla"></i>
</th>
<th class="w1p text-center"><i class="icon icon-paperpin"></i>
</th>
<th class="w40p">Lab</th>
<th class="w100">Collected Date/Time</th>
<th class="w100 text-left">Status</th>
<th class="w100">Reviewed</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chx2" />
</td>
<td><a href="" class="green-expand collapsed">click</a>
</td>
<td><span class="fnt11redtxt">STAT</span>
</td>
<td><i class="icon icon-redexla"></i>
</td>
<td> </td>
<td>Lorem Lipsum</td>
<td>05/08/2015, 05:00</td>
<td>Pending</td>
<td> </td>
<td>IMMUNOLOGY</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chx2">
</td>
<td><a href="" class="green-expand collapsed">click</a>
</td>
<td><span>Routine</span>
</td>
<td> </td>
<td><i class="icon icon-paperpin"></i>
</td>
<td>Diabetes mellitus without</td>
<td>05/10/2015, 06:50</td>
<td>Pending</td>
...
JavaScript
function format(d) {
// `d` is the original data object for the row
return '<ul class="nav nav-tabs expand-panel mt5 ml10" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Single</a> </li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Cumulative</a> </li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Graph</a> </li></ul><div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div> <div class="pad10"> <table class="table table-yellow nomargin"> <thead> <th class="w15p text-left">Name</th> <th class="w10p text-left">Value</th> <th>Reference Range</th> </thead> <tbody> <tr> <td>WHITE BLOOD CELL COUNT</td><td>6</td><td>3.8-10.8 - Thounsand/uL</td></tr><tr> <td>RED BLOOD CELL COUNT</td><td>5.05</td><td>3.80-5.10 - Million/uL</td></tr><tr> <td>HEMOGLOBIN</td><td>13.9</td><td>11.7-15.5 - g/dL</td></tr><tr> <td>HEMATOCRIT</td><td>40.8</td><td>35.0-45.0 - %</td></tr><tr> <td colspan="3"> <i class="icon gren-note"></i><span class="fnt11gren ml5"><b>Additional Note:</b></span> <span class="ml3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</span> </td></tr></tbody> </table> </div></div></div><div role="tabpanel" class="tab-pane" id="profile"> <div class="pad10"> <table class="table cumulative_tab"> <tbody> <tr> <th> <table class="table top_part nomargin noborder"> <tbody><tr> <th width="20%"></th> <th width="20%">12 Dec 2009</th> <th width="20%">12 Jan 2010</th> <th width="20%">12 Jan 2010</th> <th width="20%">12 Jan 2010</th> </tr></tbody></table> </th> </tr><tr> <td class="inner_bg nopadding"> <table class="table inner_table nomargin noborder"> <tbody><tr> <td width="20%"><strong>Absolute Neutophiles</strong></td><td width="20%">28 <span class="value_sty">H</span> <p>(1500-7800 cells/uL)</p></td><td width="20%">28...