mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
e25de3c0be
Add tablesorter-hasChildRow If the last pager row has any child rows, they are now included Add "filtered" css definition to every theme to hide content
193 lines
7.6 KiB
HTML
193 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Grouping + Filter widget with child rows</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css">
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
|
<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>
|
|
|
|
<style id="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;
|
|
}</style>
|
|
|
|
<!-- 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/parsers/parser-input-select.js"></script>
|
|
<script src="../js/widgets/widget-grouping.js"></script>
|
|
|
|
<script id="js">$(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;
|
|
});
|
|
|
|
});</script>
|
|
</head>
|
|
<body id="group">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Grouping + Filter widget with child rows</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p class="tip">
|
|
<em>NOTE!</em>
|
|
<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>
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<div id="demo"><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>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|