NOTE!

Demo

Order #
Customer
PO
Date
Total
SO71774 Good Toys PO348186287 Jul 20, 2007 $972.78
Shipping Address
99700 Bell Road
Auburn, California 95603
SO71775Cycle ClearancePO58159451May 6, 2007$2,313.13
Shipping Address
2255 254th Avenue Se
Albany, Oregon 97321
SO71776West Side MartPO19952192051May 12, 2007$87.09
Shipping Address
251 The Metro Center
Wokingham, England RG41 1QW
SO71777Demand DistributorsPO20097113391Apr 26, 2007$1,267.82
Comment
Please send ATTN: Judy
Shipping Address
25102 Springwater
Wenatchee, Washington 98801
SO71778Purchase MartPO19894146890Apr 18, 2007$1,503.98
Shipping Address
Wrentham Village
Wrentham, Massachusetts 02093
SO71779Initial Bike CompanyPO19633118218Dec 20, 2007$48,425.55
Shipping Address
789 West Alameda
Westminster, Colorado 80030
SO71780Nearby Cycle ShopPO19604173239Aug 29, 2007$42,452.65
Shipping Address
Burgess Hill
Edward Way
West Sussex, England RH15 9UD
SO71781Sundry Sporting GoodsPO19401117806Mar 9, 2008$29,262.41
Comment
Please send ATTN: Rudolph
Shipping Address
595 Burning Street
Vancouver, British Columbia V7L 4J4
SO71782Professional Sales and ServicePO19372114749Jul 27, 2007$43,962.79
Shipping Address
57251 Serene Blvd
Van Nuys, California 91411
SO71783Eastside Department StorePO19343113609May 15, 2007$92,663.56
Shipping Address
9992 Whipple Rd
Union City, California 94587

Javascript

$(function() {

// hide child rows
$('.tablesorter-childRow td').hide();

$(".tablesorter")
.tablesorter({
theme : 'blue',
// this is the default setting
cssChildRow: "tablesorter-childRow"
})
.tablesorterPager({
container: $("#pager"),
positionFixed: false
});
/* no longer needed!
.bind('pagerChange', function(){
// hide child rows after pager update
$('.tablesorter-childRow td').hide();
});
*/

// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click' ,function(){

// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
// in v2.5.12, the parent row now has the class tablesorter-hasChildRow
// so you can use this code as well
// $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();

return false;
});

});

HTML

<table class="tablesorter">
<colgroup>
<col width="85" />
<col width="250" />
<col width="100" />
<col width="90" />
<col width="70" />
</colgroup>
<thead>
<tr>
<th>Order #</th>
<th>Customer</th>
<th>PO</th>
<th>Date</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
</td>
<td>Good Toys</td>
<td>PO348186287</td>
<td>Jul 20, 2007</td>
<td>$972.78</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>99700 Bell Road<br>Auburn, California 95603</div>
</td>
</tr>
<tr>
<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
<a href="#" class="toggle">SO71775</a> <!-- link to toggle view of the child row -->
</td>
<td>Cycle Clearance</td>
<td>PO58159451</td>
<td>May 6, 2007</td>
<td>$2,313.13</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="4">
<div class="bold">Shipping Address</div>
<div>2255 254th Avenue Se<br>Albany, Oregon 97321</div>
</td>
</tr>

<!-- View page source for complete HTML markup -->

</tbody>
</table>

<div id="pager" class="pager">
<form>
<input type="button" value="&lt;&lt;" class="first" />
<input type="button" value="&lt;" class="prev" />
<input type="text" class="pagedisplay"/>
<input type="button" value="&gt;" class="next" />
<input type="button" value="&gt;&gt;" class="last" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>

Next up: Child Rows with Filter Widget ››