NOTE!
- As of v2.15.12,
- Parents of child rows now have a
tablesorter-hasChildRow
class name added. - NOTE! A new css definition was added to every default theme; the "filtered" class name (set by the
filter_filteredRow
widgetOption) has been added to properly hide/show child rows when filtered.
- Parents of child rows now have a
Demo
Order |
Status |
Priority |
Price |
|
---|---|---|---|---|
france | ||||
Cycle Clearance | FRANCE | 25% | ||
uk | ||||
Locks Company | UK | 24% | ||
Famous Bike Shop | UK | 12% | ||
usa | ||||
Good Toys | USA | 80% | ||
Cycle Initial Bike Company | USA | 36% | ||
Sports Store | USA | 90% | ||
Script
$(function(){
$("table").tablesorter({
theme : 'blue',
sortList : [[1,0]],
widgets: ['group', 'filter'],
widgetOptions: {
group_collapsible : true,
group_collapsed : false,
group_count : false,
filter_childRows : true,
}
});
$('.tablesorter-childRow td').hide();
$('.tablesorter').delegate('.toggle', 'click' ,function(){
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
});
CSS
/* extra css needed because there are 5 child rows */
/* no zebra striping */
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
/* with zebra striping */
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #d9d9d9;
}
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
background: #bfbfbf;
}
/* Grouping widget css */
tr.group-header td {
background: #eee;
}
.group-name {
text-transform: uppercase;
font-weight: bold;
}
.group-count {
color: #999;
}
.group-hidden {
display: none !important;
}
.group-header, .group-header td {
user-select: none;
-moz-user-select: none;
}
/* collapsed arrow */
tr.group-header td i {
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid #888;
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
user-select: none;
-moz-user-select: none;
}
tr.group-header.collapsed td i {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}
HTML
<table class="tablesorter">
<thead>
<tr>
<th class="Customer group-false"></th>
<th class="group-word">Order</th>
<th class="group-false">Status</th>
<th class="group-false">Priority</th>
<th class="group-false">Price</th>
</tr>
</thead>
<tbody>
<tr><td rowspan="3"><a href="#" class="toggle">Good Toys</a></td><td>USA</td><td>80%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>1561651</td><td>finish</td><td>0</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>558815</td><td>finish</td><td>0</td><td>$55</td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">Cycle Clearance</a></td><td>FRANCE</td><td>25%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>21485213</td><td>in progress</td><td>2</td><td>$7</td></tr>
<tr class="tablesorter-childRow"><td>12547854</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Cycle Initial Bike Company</a></td><td>USA</td><td>36%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>12574521</td><td>in progress</td><td>1</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>7895452</td><td>in progress</td><td>2</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>1542021</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>4489885</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Sports Store</a></td><td>USA</td><td>90%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>2</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="5"><a href="#" class="toggle">Locks Company</a></td><td>UK</td><td>24%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>18915</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>5402574</td><td>in progress</td><td>1</td><td>$78</td></tr>
<tr class="tablesorter-childRow"><td>26478</td><td>finish</td><td>0</td><td>$28</td></tr>
<tr class="tablesorter-childRow"><td>25682</td><td>finish</td><td>0</td><td>$18</td></tr>
<tr><td rowspan="3"><a href="#" class="toggle">Famous Bike Shop</a></td><td>UK</td><td>12%</td><td></td><td></td></tr>
<tr class="tablesorter-childRow"><td>185406</td><td>in progress</td><td>2</td><td>$5</td></tr>
<tr class="tablesorter-childRow"><td>541265</td><td>in progress</td><td>2</td><td>$78</td></tr>
</tbody>
</table>