Child row updates. Fixes #556 & part of #396

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

addons/pager/jquery.tablesorter.pager.js

@@ -207,6 +207,7 @@
 		hideRows = function(table, p){
 			if (!p.ajaxUrl) {
 				var i,
+				lastIndex = 0,
 				c = table.config,
 				rows = c.$tbodies.eq(0).children(),
 				l = rows.length,
@@ -216,9 +217,23 @@
 				j = 0; // size counter
 				for ( i = 0; i < l; i++ ){
 					if ( !rows[i].className.match(f) ) {
-						rows[i].style.display = ( j >= s && j < e ) ? '' : 'none';
-						// don't count child rows
-						j += rows[i].className.match(c.cssChildRow + '|' + c.selectorRemove.slice(1)) && !p.countChildRows ? 0 : 1;
+						if (j === s && rows[i].className.match(c.cssChildRow)) {
+							// hide child rows @ start of pager (if already visible)
+							rows[i].style.display = 'none';
+						} else {
+							rows[i].style.display = ( j >= s && j < e ) ? '' : 'none';
+							// don't count child rows
+							j += rows[i].className.match(c.cssChildRow + '|' + c.selectorRemove.slice(1)) && !p.countChildRows ? 0 : 1;
+							if ( j === e && rows[i].style.display !== 'none' && rows[i].className.match(ts.css.cssHasChild) ) {
+								lastIndex = i;
+							}
+						}
+					}
+				}
+				// add any attached child rows to last row of pager. Fixes part of issue #396
+				if ( lastIndex > 0 && rows[lastIndex].className.match(ts.css.cssHasChild) ) {
+					while ( ++lastIndex < l && rows[lastIndex].className.match(c.cssChildRow) ) {
+						rows[lastIndex].style.display = '';
 					}
 				}
 			}
@@ -457,6 +472,7 @@
 				for ( i = s; i < e; i++ ) {
 					$tb.append(rows[i]);
 				}
+
 				ts.processTbody(table, $tb, false);
 			}
 

css/theme.black-ice.css

@@ -173,6 +173,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.blue.css

@@ -208,6 +208,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.bootstrap.css

@@ -118,6 +118,10 @@
 	opacity: 0;
 	filter: alpha(opacity=0);
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* pager plugin */
 .tablesorter-bootstrap .tablesorter-pager select {

css/theme.bootstrap_2.css

@@ -123,6 +123,10 @@ caption {
 	opacity: 0;
 	filter: alpha(opacity=0);
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* pager plugin */
 .tablesorter-bootstrap .tablesorter-pager select {

css/theme.dark.css

@@ -174,6 +174,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.default.css

@@ -176,6 +176,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.dropbox.css

@@ -199,6 +199,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.green.css

@@ -190,6 +190,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.grey.css

@@ -232,6 +232,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.ice.css

@@ -188,6 +188,10 @@ caption {
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.jui.css

@@ -141,6 +141,10 @@
 	-o-transition: height 0.1s ease;
 	transition: height 0.1s ease;
 }
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
 
 /* ajax error row */
 .tablesorter .tablesorter-errorRow td {

css/theme.less

@@ -317,6 +317,10 @@
 		opacity: 0;
 		filter: alpha(opacity=0);
 	}
+	/* rows hidden by filtering (needed for child rows) */
+	.filtered {
+		display: none;
+	}
 
 	/* ajax error row */
 	.tablesorter-errorRow td {

docs/css/jq.css

@@ -70,6 +70,7 @@ div.digg {float: right;}
 .next-up { padding-top: 10px; font-size: 90%; }
 .narrow-block { width: 50%; margin: 50px auto; }
 .spacer { height: 800px; }
+.halfspacer { height: 400px; }
 .right { text-align:right; }
 #pager-demo th.remove { width: 20px; } /* pager demo */
 #pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; }

docs/example-child-rows-filtered.html

@@ -18,6 +18,10 @@
 	<script src="../js/jquery.tablesorter.js"></script>
 	<script src="../js/jquery.tablesorter.widgets.js"></script>
 
+	<!-- Tablesorter: pager -->
+	<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
+	<script src="../js/widgets/widget-pager.js"></script>
+
 	<script id="js">$(function() {
 
 	$(".tablesorter")
@@ -27,9 +31,15 @@
 			cssChildRow: "tablesorter-childRow",
 
 			// initialize zebra and filter widgets
-			widgets: ["zebra", "filter"],
+			widgets: ["zebra", "filter", "pager"],
 
 			widgetOptions: {
+				// output default: '{page}/{totalPages}'
+				// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
+				pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
+				pager_removeRows: false,
+
+
 				// include child row content while filtering, if true
 				filter_childRows  : true,
 				// class name applied to filter row and each input
@@ -52,7 +62,7 @@
 
 		// 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();
+		$(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
 
 		return false;
 	});
@@ -86,7 +96,17 @@ <h3>Flexible client-side table sorting</h3>
 		<ul>
 			<li>Click the link in the Order # column to reveal the hidden child row cells (<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>). This option is available in the original plugin.</li>
 			<li>The filter widget will work with the original tablesorter plugin, just include the jquery.tablesorter.widget.js file and initialize the widget as seen below.</li>
-			<li>Combining the filter widget and pager plugin will not work as expected.</li>
+			<li><del>Combining the filter widget and pager plugin will not work as expected</del>.</li>
+			<li>As of <span class="version updated">v2.15.12</span>,
+				<ul>
+					<li>This demo includes the pager widget.</li>
+					<li>For now, when combining the filter widget with pager, ensure the <code>removeRows</code> option is set to <code>false</code>.</li>
+					<li>Parents of child rows now have a <code>tablesorter-hasChildRow</code> class name added.</li>
+					<li>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</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>
+					<li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
+				</ul>
+			</li>
 		</ul>
 	</p>
 
@@ -99,6 +119,21 @@ <h1>Demo</h1>
 		<li>When false, child row content is ignored. Enter "cal" and no rows will be found.</li>
 	</ul>
 
+	<div class="pager">
+		<img src="../addons/pager/icons/first.png" class="first" alt="First" />
+		<img src="../addons/pager/icons/prev.png" class="prev" alt="Prev" />
+		<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+		<img src="../addons/pager/icons/next.png" class="next" alt="Next" />
+		<img src="../addons/pager/icons/last.png" class="last" alt="Last" />
+		<select class="pagesize" title="Select page size">
+			<option value="10">10</option>
+			<option value="20">20</option>
+			<option value="30">30</option>
+			<option value="40">40</option>
+		</select>
+		<select class="gotoPage" title="Select page number"></select>
+	</div>
+
 	<table class="tablesorter">
 	<colgroup>
 		<col width="85" />

docs/example-child-rows.html

@@ -34,11 +34,13 @@
 		.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
@@ -48,6 +50,9 @@
 		// 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;
 	});
@@ -72,6 +77,14 @@ <h3>Flexible client-side table sorting</h3>
 		(<a href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">original demo</a>).</li>
 			<li>This option is available in the original plugin.</li>
 			<li>This demo had the default child row class name changed from "expand-child" to "tablesorter-childRow" in v2.4.</li>
+			<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>The last row of each page now includes any child rows. For example, on page 1, click on the "SO71783" row link and the associated child row will now show, as it should</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. Please see the <a href="example-child-rows-filtered.html">Child Rows with Filter Widget</a> demo.</li>
+					<li>The additional code to always hide child row cells on <code>pagerChange</code> is no longer needed.</li>
+				</ul>
+			</li>
 		</ul>
 	</p>
 
@@ -335,7 +348,7 @@ <h1>Demo</h1>
 	<form>
 		<input type="button" value="&lt;&lt;" class="first" />
 		<input type="button" value="&lt;" class="prev" />
-		<input type="text" class="pagedisplay"/>
+		<input type="text" class="pagedisplay" readonly/>
 		<input type="button" value="&gt;" class="next" />
 		<input type="button" value="&gt;&gt;" class="last" />
 		<select class="pagesize">

docs/example-widget-grouping-filter-childrows.html

@@ -91,7 +91,7 @@
 			group_collapsible : true,
 			group_collapsed   : false,
 			group_count       : false,
-			filter_childRows  : false,
+			filter_childRows  : true,
 		}
 	});
 
@@ -113,6 +113,18 @@ <h3>Flexible client-side table sorting</h3>
 </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">

docs/index.html

@@ -361,8 +361,8 @@ <h4>Sorting</h4>
 				<li><a href="example-option-custom-sort.html">Custom sort script</a> (<a href="#textsorter"><code>textSorter</code></a>; added v2.2; updated <span class="version updated">v2.12</span>)</li>
 				<li><a href="example-locale-sort.html">Sorting Accented Characters</a> (<a href="#sortlocalecompare"><code>sortLocaleCompare</code></a>; v2.24; <a href="https://github.com/Mottie/tablesorter/wiki/Language">languages</a>)</li>
 				<li><a href="example-trigger-sort.html">Sort table using a link outside the table</a> (external link)</li>
-				<li><a href="example-child-rows.html">Attach child rows (rows that sort with their parent row)</a></li>
-				<li><a href="example-child-rows-filtered.html">Use child rows + filter widget</a></li>
+				<li><a href="example-child-rows.html">Attach child rows (rows that sort with their parent row)</a> (<span class="updated version">v2.15.12</span>)</li>
+				<li><a href="example-child-rows-filtered.html">Use child rows + filter widget</a> (<span class="updated version">v2.15.12</span>)</li>
 				<li><a href="example-multiple-tbodies.html">Sorting with Multiple Tbodies</a> (v2.2)</li>
 				<li><a href="example-header-column-span.html">Sorting Across Multiple Columns</a> (v2.3)</li>
 				<li><a href="example-option-show-processing.html">Show a processing icon during sorting/filtering</a> (v2.4)</li>
@@ -401,7 +401,7 @@ <h4 id="extras">Plugins / Widgets<br>
 		<li>Grouping rows widget:
 			<ul>
 				<li><a href="example-widget-grouping.html">basic</a> (v2.8; <span class="version updated">v2.15</span>).</li>
-				<li><a href="example-widget-grouping-filter-childrows.html">Grouping + filter + child rows</a></li>
+				<li><a href="example-widget-grouping-filter-childrows.html">Grouping + filter + child rows</a> (<span class="updated version">v2.15.12</span>)</li>
 			</ul>
 			<br>
 		</li>

js/jquery.tablesorter.js

@@ -114,6 +114,7 @@
 			// the table and MUST only contain one class name - fixes #381
 			ts.css = {
 				table      : 'tablesorter',
+				cssHasChild: 'tablesorter-hasChildRow',
 				childRow   : 'tablesorter-childRow',
 				header     : 'tablesorter-header',
 				headerRow  : 'tablesorter-headerRow',
@@ -291,6 +292,10 @@
 							// if this is a child row, add it to the last row's children and continue to the next row
 							if (c.hasClass(tc.cssChildRow)) {
 								tc.cache[k].row[tc.cache[k].row.length - 1] = tc.cache[k].row[tc.cache[k].row.length - 1].add(c);
+								// add "hasChild" class name to parent row
+								if (!c.prev().hasClass(tc.cssChildRow)) {
+									c.prev().addClass(ts.css.cssHasChild);
+								}
 								// go to the next for loop
 								continue;
 							}