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 Dipak1991

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>&nbsp;</td>
            <td>Lorem Lipsum</td>
            <td>05/08/2015, 05:00</td>
            <td>Pending</td>
            <td>&nbsp;</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>&nbsp;</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...