stickyHeaders now include caption (fixes #126) & filter row (fixes #249)

Mottie · Apr 1, 2013 · 2134d6d · 2134d6d
1 parent 45c1b9b
commit 2134d6d
Show file tree

Hide file tree

Showing 14 changed files with 181 additions and 79 deletions.
diff --git a/css/theme.black-ice.css b/css/theme.black-ice.css
@@ -113,6 +113,11 @@
 	background-color: #5a646b;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-blackice .tablesorter-filter-row td {
 	background: #222;
@@ -153,7 +158,7 @@
 /* filters */
 .tablesorter-blackice .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 0;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.blue.css b/css/theme.blue.css
@@ -148,6 +148,11 @@
 	background-color: #ebf0fa;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-blue .tablesorter-filter-row td {
 	background: #eee;
@@ -188,7 +193,7 @@
 /* filters */
 .tablesorter-blue .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 0;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.bootstrap.css b/css/theme.bootstrap.css
@@ -71,10 +71,15 @@
 	z-index: 1000;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 0 auto;
 	padding: 4px 6px;
 	background-color: #fff;

diff --git a/css/theme.dark.css b/css/theme.dark.css
@@ -112,6 +112,11 @@
 	background-color: #0f0f0f;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-dark .tablesorter-filter-row td {
 	background: #202020;
@@ -154,7 +159,7 @@
 /* filters */
 .tablesorter-dark .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 4px;
 	padding: 4px;
 	background-color: #111;

diff --git a/css/theme.default.css b/css/theme.default.css
@@ -115,6 +115,11 @@ Default Theme
 	background-color: #f2f2f2;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-default .tablesorter-filter-row td {
 	background: #eee;
@@ -156,7 +161,7 @@ Default Theme
 /* filters */
 .tablesorter-default .tablesorter-filter {
 	width: 95%;
-	height: inherit;
+	height: auto;
 	margin: 4px;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.dropbox.css b/css/theme.dropbox.css
@@ -22,7 +22,6 @@
 	border-color: #82cffa #e7f2fb #96c4ea;
 	border-style: solid;
 	border-width: 1px;
-	height: 29px;
 	padding: 3px 6px;
 	font-size: 13px;
 	font-weight: normal;
@@ -133,9 +132,14 @@
 .tablesorter-dropbox tr.even td.tertiary {
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* Filter Widget */
-.tablesorter-dropbox.tablesorter-filter-row td {
-	background: #eee;
+.tablesorter-dropbox .tablesorter-filter-row td {
+	background: #fff;
 	line-height: normal;
 	text-align: center; /* center the input */
 	-webkit-transition: line-height 0.1s ease;
@@ -144,14 +148,14 @@
 	transition: line-height 0.1s ease;
 }
 /* optional disabled input styling */
-.tablesorter-dropbox.tablesorter-filter-row .disabled {
+.tablesorter-dropbox .tablesorter-filter-row .disabled {
 	opacity: 0.5;
 	filter: alpha(opacity=50);
 	cursor: not-allowed;
 }
 
 /* hidden filter row */
-.tablesorter-dropbox.tablesorter-filter-row.hideme td {
+.tablesorter-dropbox .tablesorter-filter-row.hideme td {
 	/*** *********************************************** ***/
 	/*** change this padding to modify the thickness     ***/
 	/*** of the closed filter row (height = padding x 2) ***/
@@ -161,7 +165,7 @@
 	line-height: 0;
 	cursor: pointer;
 }
-.tablesorter-dropbox.tablesorter-filter-row.hideme .tablesorter-filter {
+.tablesorter-dropbox .tablesorter-filter-row.hideme .tablesorter-filter {
 	height: 1px;
 	min-height: 0;
 	border: 0;
@@ -173,11 +177,11 @@
 }
 
 /* filters */
-.tablesorter-dropbox.tablesorter-filter {
+.tablesorter-dropbox .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 4px;
-	padding: 4px;
+
 	background-color: #fff;
 	border: 1px solid #bbb;
 	color: #333;

diff --git a/css/theme.green.css b/css/theme.green.css
@@ -131,6 +131,11 @@
 	background-color: #ebfaed;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-green .tablesorter-filter-row td {
 	background: #eee;
@@ -171,7 +176,7 @@
 /* filters */
 .tablesorter-green .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 4px;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.grey.css b/css/theme.grey.css
@@ -167,6 +167,11 @@
 	background-color: #2073B7;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-grey .tablesorter-filter-row td {
 	background: #3c3c3c;
@@ -207,7 +212,7 @@
 /* filters */
 .tablesorter-grey .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 0;
 	padding: 4px;
 	background-color: #6d6d6d;

diff --git a/css/theme.ice.css b/css/theme.ice.css
@@ -122,6 +122,11 @@
 	background-color: #ebfafa;
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-ice .tablesorter-filter-row td {
 	background: #eee;
@@ -162,7 +167,7 @@
 /* filters */
 .tablesorter-ice .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 4px;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.jui.css b/css/theme.jui.css
@@ -78,6 +78,11 @@
 	background-color: rgba(255,255,255,0.8);
 }
 
+/* caption */
+caption {
+	background: #fff;
+}
+
 /* filter widget */
 .tablesorter-jui .tablesorter-filter-row td {
 	background: transparent;
@@ -118,7 +123,7 @@
 /* filters */
 .tablesorter-jui .tablesorter-filter {
 	width: 98%;
-	height: inherit;
+	height: auto;
 	margin: 0;
 	padding: 4px;
 	background-color: #fff;

diff --git a/css/theme.less b/css/theme.less
@@ -30,6 +30,8 @@
 @headerSortUp          : lighten(spin(@headerBackground, 5), 10%); /* desaturate(@headerBackground, 10%); */
 @headerSortDown        : darken(spin(@headerBackground, -5), 10%); /* darken(@headerSortUp, 5%); */
 
+@captionBackground     : #fff; /* it might be best to match the document body background color here */
+
 @filterCellBackground  : #eee;
 @filterElementTextColor: #333;
 @filterElementBkgd     : #fff;
@@ -269,11 +271,16 @@
 		background-color: @tertiaryEven;
 	}
 
+	/* caption (non-theme matching) */
+	caption {
+		background: @captionBackground ;
+	}
+
 	/* filter widget */
 	.tablesorter-filter-row input,
 	.tablesorter-filter-row select{
 		width: 98%;
-		height: inherit;
+		height: auto;
 		margin: 0;
 		padding: @overallPadding;
 		color: @filterElementTextColor;

diff --git a/docs/example-widget-sticky-header.html b/docs/example-widget-sticky-header.html
@@ -37,7 +37,7 @@
 
 		headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
 
-		widgets: ["columns", "filter", "stickyHeaders", "uitheme", "zebra"] , //[ 'uitheme', 'zebra', 'stickyHeaders' ],
+		widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
 
 		widgetOptions: {
 
@@ -102,6 +102,7 @@ <h3>Flexible client-side table sorting</h3>
 					<li>Its default value is <code>-sticky</code> </li>
 				</ul>
 			</li>
+			<li>Table captions and any additional rows (filter widget row) will also be included in the sticky header <span class="tip"><em>New!</em></span> v2.9!</li> 
 			<li>You will need to modify the <code>headerTemplate</code> option to include the jQuery UI icon! See the example in the code. <span class="tip"><em>New!</em></span> v2.7!</li>
 			<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
 			<li>Added a widget option named <code>stickyHeader</code> option which contains the css class name applied to the actual sticky header (v2.1).</li>
@@ -125,6 +126,7 @@ <h1>Demo</h1>
 	<br><br>
 
 	<table class="tablesorter">
+	<caption>Student Grades</caption>
 	<thead>
 		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th class="filter-false sorter-false">Geometry</th></tr>
 	</thead>

diff --git a/docs/index.html b/docs/index.html
@@ -1423,12 +1423,12 @@ <h1>Widget Options</h1>
 			<tr><th>Widget Priority</th><th>Name</th><th>Requires jQuery</th><th>Limiting function</th></tr>
 		</thead>
 		<tbody>
-			<tr><td>60</td><td>columns</td><td>v1.2.6</td><td></td></tr>
+			<tr><td>30</td><td>columns</td><td>v1.2.6</td><td></td></tr>
 			<tr><td>50</td><td>filter</td><td>v1.4.3</td><td>1.4.3 (nextUntil)</td></tr>
 			<tr><td>Last</td><td>pager</td><td>v1.2.6</td><td></td></tr>
 			<tr><td>40</td><td>resizable</td><td>v1.4.1*</td><td>1.4 (isEmptyObject); 1.4.1 (parseJSON)*</td></tr>
-			<tr><td>30</td><td>saveSort</td><td>v1.4.1</td><td>1.4.1 (parseJSON)*</td></tr>
-			<tr><td>20</td><td>stickyHeaders</td><td>v1.2.6</td><td></td></tr>
+			<tr><td>20</td><td>saveSort</td><td>v1.4.1</td><td>1.4.1 (parseJSON)*</td></tr>
+			<tr><td>60</td><td>stickyHeaders</td><td>v1.2.6</td><td></td></tr>
 			<tr><td>10</td><td>uitheme</td><td>v1.2.6</td><td></td></tr>
 			<tr><td>90</td><td>zebra</td><td>v1.2.6</td><td></td></tr>
 		</tbody>
@@ -1757,7 +1757,7 @@ <h4>Comparison example</h4>
 				<td>Boolean</td>
 				<td>false</td>
 				<td>
-					Filter widget: Set this option to <code>true</code> to hide the filter row initially. The rows is revealed by hovering over the filter row or giving any filter input/select focus (v2.4).
+					Filter widget: Set this option to <code>true</code> to hide the filter row initially. The row is revealed by hovering over the visible portion of the filter row or by giving any filter input/select focus (tab key) (v2.4).
 					<div class="collapsible">
 					<br>
 					Use the <a href="#widget-filter-hidefilters"><code>filter_hideFilters</code></a> option as follows:
@@ -1972,9 +1972,11 @@ <h4>Comparison example</h4>
 				<td>String</td>
 				<td>"tablesorter-stickyHeader"</td>
 				<td>
-					Sticky Headers widget: This is the class name applied to the sticky header row (tr). If you change it from the default class name of <code>"tablesorter-stickyHeader"</code> make sure you also update the css! (v2.1).
+					Sticky Headers widget: This is the class name applied to the sticky header row (tr) (v2.1).
 					<div class="collapsible">
 					<br>
+					If you change it from the default class name of <code>"tablesorter-stickyHeader"</code> make sure you also update the css!<br>
+					<br>
 					Use the <a href="#widget-sticky-headers"><code>"stickyHeaders"</code></a> option to change the css class name as follows:
 					<pre class="prettyprint lang-javascript">$(function(){
   $("table").tablesorter({
@@ -1989,6 +1991,30 @@ <h4>Comparison example</h4>
 				<td><a href="example-widget-sticky-header.html">Example</a></td>
 			</tr>
 
+			<tr id="widget-sticky-headers-cloneid">
+				<td><a href="#" class="toggle2">stickyHeaders_cloneId</a></td>
+				<td>String</td>
+				<td>"-sticky"</td>
+				<td>
+					Sticky Headers widget: If the table has an ID defined, the suffix from this option will be added to the ID in the cloned sticky table <span class="tip"><em>New!</em></span> v2.9.
+					<div class="collapsible">
+					<br>
+					So if your table ID is <code>"gummy"</code>, then the cloned sticky table id becomes <code>"gummy-sticky"</code><br>
+					<br>
+					Use the <a href="#widget-sticky-headers-cloneid"><code>"stickyHeaders_cloneId"</code></a> option to change the cloned table id as follows:
+					<pre class="prettyprint lang-javascript">$(function(){
+  $("table").tablesorter({
+    widgets: ["stickyHeaders"],
+    widgetOptions : {
+      // cloned table id suffix
+      stickyHeaders_cloneId : "-clone"
+    }
+  });
+});</pre></div>
+				</td>
+				<td></td>
+			</tr>
+
 			<tr id="widget-resizable">
 				<td><a href="#" class="toggle2">resizable</a></td>
 				<td>Boolean</td>
@@ -2062,7 +2088,7 @@ <h4>Comparison example</h4>
 				<td>String</td>
 				<td>"jui"</td>
 				<td>
-					Instead of the array of icon class names, this option now contains the name of the theme. Currently jQuery UI ("jui") and Bootstrap ("bootstrap") themes are supported. To modify the class names used, extend from the theme (updated v2.4)
+					This option contains the name of the theme. Currently jQuery UI ("jui") and Bootstrap ("bootstrap") themes are supported. To modify the class names used, extend from the theme (updated v2.4)
 					<div class="collapsible">
 					<p></p>
 					<pre class="prettyprint lang-javascript">// Extend the themes to change any of the default class names ** NEW **