2013-11-11 23:50:00 +00:00
<!DOCTYPE html>
< html >
< head >
2013-11-16 19:16:53 +00:00
< meta charset = "utf-8" >
2016-01-10 22:24:57 +00:00
< title > jQuery tablesorter 2.0 - Grouping + Filter widget with child rows< / title >
2013-11-11 23:50:00 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2013-11-11 23:50:00 +00:00
<!-- Demo stuff -->
2014-05-21 22:09:23 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2015-02-13 12:56:45 +00:00
< script src = "js/jquery-ui.min.js" > < / script >
2013-11-11 23:50:00 +00:00
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
2014-02-01 16:19:26 +00:00
< style id = "css" > / * e x t r a c s s n e e d e d b e c a u s e t h e r e a r e 5 c h i l d r o w s * /
/* 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;
}
2013-11-16 19:16:53 +00:00
2016-12-30 13:41:13 +00:00
/* Grouping widget css;
* contained in widget.grouping.css (added v2.28.4)
*/
2014-02-01 16:19:26 +00:00
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;
}< / style >
2013-11-11 23:50:00 +00:00
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
<!-- grouping widget -->
< script src = "../js/widgets/widget-grouping.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
$("table").tablesorter({
theme : 'blue',
sortList : [[1,0]],
2013-11-16 19:16:53 +00:00
widgets: ['group', 'filter'],
2013-11-11 23:50:00 +00:00
widgetOptions: {
group_collapsible : true,
group_collapsed : false,
group_count : false,
2016-12-30 13:41:13 +00:00
filter_childRows : true
2013-11-11 23:50:00 +00:00
}
});
2013-11-16 19:16:53 +00:00
2013-11-11 23:50:00 +00:00
$('.tablesorter-childRow td').hide();
2016-12-30 13:41:13 +00:00
$('.tablesorter').on('click', '.toggle', function(){
2013-11-11 23:50:00 +00:00
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
});< / script >
< / head >
< body id = "group" >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2013-11-16 19:16:53 +00:00
< h2 > Grouping + Filter widget with child rows< / h2 >
2013-11-11 23:50:00 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2014-03-31 10:07:19 +00:00
< p class = "tip" >
< em > NOTE!< / em >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
< li > As of < span class = "version updated" > v2.15.12< / span > ,
< ul >
< li > Parents of child rows now have a < code > tablesorter-hasChildRow< / code > class name added.< / li >
< li > < span class = "label label-info" > NOTE!< / span > A new css definition was added to every default theme; the "filtered" class name (set by the < code > filter_filteredRow< / code > widgetOption) has been added to properly hide/show child rows when filtered.< / li >
< / ul >
< / li >
< / ul >
2014-03-31 10:07:19 +00:00
2013-11-11 23:50:00 +00:00
< h1 > Demo< / h1 >
< div id = "demo" > < table class = "tablesorter" >
< thead >
< tr >
< th class = "Customer group-false" > < / th >
< th class = "group-word" > Order< / th >
2013-11-16 19:16:53 +00:00
< th class = "group-false" > Status< / th >
2013-11-11 23:50:00 +00:00
< th class = "group-false" > Priority< / th >
< th class = "group-false" > Price< / th >
< / tr >
< / thead >
< tbody >
2014-07-18 01:42:01 +00:00
< tr > < td rowspan = "3" > < a href = "#" class = "toggle" > Good Toys< / a > < / td > < td > USA< / td > < td > 80%< / td > < td > < / td > < td > < / td > < / tr >
2013-11-11 23:50:00 +00:00
< 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 >
2013-11-16 19:16:53 +00:00
2014-07-18 01:42:01 +00:00
< 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 >
2013-11-11 23:50:00 +00:00
< 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 >
2013-11-16 19:16:53 +00:00
2014-07-18 01:42:01 +00:00
< tr > < td rowspan = "5" > < a href = "#" class = "toggle" > Sports Store< / a > < / td > < td > USA< / td > < td > 90%< / td > < td > < / td > < td > < / td > < / tr >
2013-11-11 23:50:00 +00:00
< 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 >
2013-11-16 19:16:53 +00:00
2014-07-18 01:42:01 +00:00
< tr > < td rowspan = "5" > < a href = "#" class = "toggle" > Locks Company< / a > < / td > < td > UK< / td > < td > 24%< / td > < td > < / td > < td > < / td > < / tr >
2013-11-11 23:50:00 +00:00
< 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 >
2013-11-16 19:16:53 +00:00
2014-07-18 01:42:01 +00:00
< tr > < td rowspan = "3" > < a href = "#" class = "toggle" > Famous Bike Shop< / a > < / td > < td > UK< / td > < td > 12%< / td > < td > < / td > < td > < / td > < / tr >
2013-11-11 23:50:00 +00:00
< 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 >
2013-11-16 19:16:53 +00:00
2013-11-11 23:50:00 +00:00
< / tbody >
< / table >
< / div >
2016-12-30 13:41:13 +00:00
< h1 > Page Header< / h1 >
< div >
< pre class = "prettyprint lang-html" > < !-- Tablesorter: required -->
2016-12-30 13:57:01 +00:00
< script src=" js/jquery-latest.min.js" > < /script>
2016-12-30 13:41:13 +00:00
< link href=" css/theme.blue.css" rel=" stylesheet" >
< script src=" js/jquery.tablesorter.js" > < /script>
< script src=" js/jquery.tablesorter.widgets.js" > < /script>
< !-- Grouping widget -->
< link href=" css/widget.group.css" rel=" stylesheet" > < !-- added v2.28.4 -->
< script src=" js/widgets/widget-grouping.js" > < /script> < / pre >
< / div >
2013-11-16 19:16:53 +00:00
< h1 > Script< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-js" > < / pre >
< / div >
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
2014-07-18 01:42:01 +00:00
< / div >
2013-11-11 23:50:00 +00:00
< / body >
< / html >