mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Add new exemple with grouping widget + filter widget + childrow widget
Exclude group-header class in filter widget Exclude cssChildRow class in grouping widget Change calculation of colspan in grouping widget Add !important for group-hidden class
This commit is contained in:
Hugot Maxime
parent
ce7e0836c0
commit
9923be2be9
161
docs/example-widget-grouping-filter-childrows.html
Normal file
161
docs/example-widget-grouping-filter-childrows.html
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>jQuery plugin: Tablesorter 2.0 - Grouping Rows Widget</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.0/themes/cupertino/jquery-ui.css">
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/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">
|
||||||
|
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>
|
||||||
|
$(function(){
|
||||||
|
$('.accordion').accordion({
|
||||||
|
heightStyle: 'content',
|
||||||
|
collapsible : true
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</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 : false,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.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 Rows Widget</h2>
|
||||||
|
<h3>Flexible client-side table sorting</h3>
|
||||||
|
<a href="index.html">Back to documentation</a>
|
||||||
|
</div>
|
||||||
|
<div id="main">
|
||||||
|
|
||||||
|
<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">Statut</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>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -307,6 +307,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li>
|
<li><a href="example-widget-build-table.html">Build Table Widget</a> (<span class="version">v2.11</span>).</li>
|
||||||
<li><a href="example-widget-grouping.html">Grouping rows Widget</a> (v2.8; <span class="version updated">v2.13</span>).</li>
|
<li><a href="example-widget-grouping.html">Grouping rows Widget</a> (v2.8; <span class="version updated">v2.13</span>).</li>
|
||||||
|
<li><a href="example-widget-grouping-filter-childrows.html">Grouping rows Widget + filter + child rows</a></li>
|
||||||
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
|
<li><a href="example-widgets.html">Repeat Headers widget</a> (v2.0.5; <span class="version updated">v2.9</span>)</li>
|
||||||
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.8.3</span>)</li>
|
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="version updated">v2.8.3</span>)</li>
|
||||||
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
|
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
|
||||||
|
|||||||
@ -793,7 +793,7 @@ ts.filter = {
|
|||||||
for (tbodyIndex = 0; tbodyIndex < $tbodies.length; tbodyIndex++ ) {
|
for (tbodyIndex = 0; tbodyIndex < $tbodies.length; tbodyIndex++ ) {
|
||||||
if ($tbodies.eq(tbodyIndex).hasClass(ts.css.info)) { continue; } // ignore info blocks, issue #264
|
if ($tbodies.eq(tbodyIndex).hasClass(ts.css.info)) { continue; } // ignore info blocks, issue #264
|
||||||
$tbody = ts.processTbody(table, $tbodies.eq(tbodyIndex), true);
|
$tbody = ts.processTbody(table, $tbodies.eq(tbodyIndex), true);
|
||||||
$rows = $tbody.children('tr').not('.' + c.cssChildRow);
|
$rows = $tbody.children('tr').not('.' + c.cssChildRow).not('.group-header');
|
||||||
len = $rows.length;
|
len = $rows.length;
|
||||||
if (combinedFilters === '' || wo.filter_serversideFiltering) {
|
if (combinedFilters === '' || wo.filter_serversideFiltering) {
|
||||||
$tbody.children().show().removeClass(wo.filter_filteredRow);
|
$tbody.children().show().removeClass(wo.filter_filteredRow);
|
||||||
|
|||||||
@ -99,7 +99,7 @@ ts.addWidget({
|
|||||||
for (k = 0; k < c.$tbodies.length; k++) {
|
for (k = 0; k < c.$tbodies.length; k++) {
|
||||||
n = c.cache[k].normalized;
|
n = c.cache[k].normalized;
|
||||||
group = ''; // clear grouping across tbodies
|
group = ''; // clear grouping across tbodies
|
||||||
$tr = c.$tbodies.eq(k).children('tr');
|
$tr = c.$tbodies.eq(k).children('tr').not('.' + c.cssChildRow );
|
||||||
if (wo.group_collapsed && wo.group_collapsible) {
|
if (wo.group_collapsed && wo.group_collapsible) {
|
||||||
$tr.addClass('group-hidden');
|
$tr.addClass('group-hidden');
|
||||||
}
|
}
|
||||||
@ -119,7 +119,7 @@ ts.addWidget({
|
|||||||
curr = wo.group_formatter((curr || '').toString(), col, table, c, wo) || curr;
|
curr = wo.group_formatter((curr || '').toString(), col, table, c, wo) || curr;
|
||||||
}
|
}
|
||||||
$tr.eq(j).before('<tr class="group-header ' + c.selectorRemove.slice(1) + (wo.group_collapsed && wo.group_collapsible ? ' collapsed' : '') +
|
$tr.eq(j).before('<tr class="group-header ' + c.selectorRemove.slice(1) + (wo.group_collapsed && wo.group_collapsible ? ' collapsed' : '') +
|
||||||
'" unselectable="on"><td colspan="' + (c.columns+1) + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' +
|
'" unselectable="on"><td colspan="' + (c.columns) + '">' + (wo.group_collapsible ? '<i/>' : '') + '<span class="group-name">' +
|
||||||
curr + '</span><span class="group-count"></span></td></tr>');
|
curr + '</span><span class="group-count"></span></td></tr>');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user