From e95a77efe7c4c68562fed7c668d6c07c60ef3fdf Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Fri, 30 Dec 2016 18:08:32 -0600
Subject: [PATCH] Themes: Add column widget support to bootstrap. See #1347

---
 css/theme.bootstrap.css                     | 25 ++++++++++++++-
 css/theme.bootstrap_2.css                   | 25 ++++++++++++++-
 docs/example-widget-bootstrap-theme-v2.html | 26 +++++++++------
 docs/example-widget-bootstrap-theme.html    | 35 ++++++++++++---------
 docs/index.html                             |  3 +-
 5 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/css/theme.bootstrap.css b/css/theme.bootstrap.css
index 3649b9a3..ce67fd44 100644
--- a/css/theme.bootstrap.css
+++ b/css/theme.bootstrap.css
@@ -83,6 +83,29 @@
 	background-repeat: no-repeat !important;
 }
 
+/* Column Widget - column sort colors */
+.tablesorter-bootstrap > tbody > tr.odd td.primary {
+	background-color: #bfbfbf;
+}
+.tablesorter-bootstrap > tbody > tr td.primary,
+.tablesorter-bootstrap > tbody > tr.even td.primary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap > tbody > tr.odd td.secondary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap > tbody > tr td.secondary,
+.tablesorter-bootstrap > tbody > tr.even td.secondary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap > tbody > tr td.tertiary,
+.tablesorter-bootstrap > tbody > tr.even td.tertiary {
+	background-color: #f2f2f2;
+}
+
 /* caption */
 .caption {
 	background-color: #fff;
@@ -143,7 +166,7 @@
 	opacity: 0;
 	filter: alpha(opacity=0);
 }
-/* rows hidden by filtering (needed for child rows) */
+/* rows hidden by filtering */
 .tablesorter .filtered {
 	display: none;
 }
diff --git a/css/theme.bootstrap_2.css b/css/theme.bootstrap_2.css
index ac9e8cb1..b53469e0 100644
--- a/css/theme.bootstrap_2.css
+++ b/css/theme.bootstrap_2.css
@@ -89,6 +89,29 @@
 	z-index: 1000;
 }
 
+/* Column Widget - column sort colors */
+.tablesorter-bootstrap > tbody > tr.odd td.primary {
+	background-color: #bfbfbf;
+}
+.tablesorter-bootstrap > tbody > tr td.primary,
+.tablesorter-bootstrap > tbody > tr.even td.primary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap > tbody > tr.odd td.secondary {
+	background-color: #d9d9d9;
+}
+.tablesorter-bootstrap > tbody > tr td.secondary,
+.tablesorter-bootstrap > tbody > tr.even td.secondary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
+	background-color: #e6e6e6;
+}
+.tablesorter-bootstrap > tbody > tr td.tertiary,
+.tablesorter-bootstrap > tbody > tr.even td.tertiary {
+	background-color: #f2f2f2;
+}
+
 /* caption */
 caption {
 	background-color: #fff;
@@ -145,7 +168,7 @@ caption {
 	opacity: 0;
 	filter: alpha(opacity=0);
 }
-/* rows hidden by filtering (needed for child rows) */
+/* rows hidden by filtering */
 .tablesorter .filtered {
 	display: none;
 }
diff --git a/docs/example-widget-bootstrap-theme-v2.html b/docs/example-widget-bootstrap-theme-v2.html
index cfe412c6..46b2ba3a 100644
--- a/docs/example-widget-bootstrap-theme-v2.html
+++ b/docs/example-widget-bootstrap-theme-v2.html
@@ -64,13 +64,16 @@
 
 		// widget code contained in the jquery.tablesorter.widgets.js file
 		// use the zebra stripe widget if you plan on hiding any rows (filter widget)
-		widgets : [ "uitheme", "filter", "zebra" ],
+		widgets : [ "uitheme", "filter", "columns", "zebra" ],
 
 		widgetOptions : {
 			// using the default zebra striping class name, so it actually isn't included in the theme variable above
 			// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
 			zebra : ["even", "odd"],
 
+			// class names added to columns when sorted
+			columns: [ "primary", "secondary", "tertiary" ],
+
 			// reset filters button
 			filter_reset : ".reset",
 
@@ -125,7 +128,7 @@
 			$(this)
 				.toggleClass('btn-danger btn-success')
 				.find('i')
-				.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
+				.toggleClass('icon-ok icon-remove').end()
 				.find('span')
 				.text(t ? 'disabled' : 'enabled');
 			$('table').trigger('refreshWidgets', [false]);
@@ -150,6 +153,7 @@
 		<span class="label label-info">NOTE!</span>
 	</p>
 	<ul>
+		<li>In <span class="version updated">v2.28.4</span>, added support for the column widget.</li>
 		<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
 		<li>Hover over the thick grey bar under the header to reveal the filter row.</li>
 		<li>For more information like revision history of this theme &amp; why there is a button to enable/disable the zebra widget, please see the <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x demo</a>.</li>
@@ -158,9 +162,9 @@
 	<h1>Demo</h1>
 	<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
 	<div class="bootstrap_buttons">
-		Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
+		Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button>
 		<br>
-		Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
+		Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button>
 	</div>
 	<br>
 
@@ -187,16 +191,20 @@
 		</tr>
 		<tr>
 			<th colspan="7" class="ts-pager form-horizontal">
-				<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
-				<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
+				<div class="btn-group">
+					<button type="button" class="btn first"><i class="icon-step-backward"></i></button>
+					<button type="button" class="btn prev"><i class="icon-arrow-left"></i></button>
+				</div>
 				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
-				<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
+				<div class="btn-group">
+					<button type="button" class="btn next"><i class="icon-arrow-right"></i></button>
+					<button type="button" class="btn last"><i class="icon-step-forward"></i></button>
+				</div>
 				<select class="pagesize input-mini" title="Select page size">
 					<option selected="selected" value="10">10</option>
 					<option value="20">20</option>
 					<option value="30">30</option>
-					<option value="40">40</option>
+					<option value="all">All Rows</option>
 				</select>
 				<select class="pagenum input-mini" title="Select page number"></select>
 			</th>
diff --git a/docs/example-widget-bootstrap-theme.html b/docs/example-widget-bootstrap-theme.html
index 0d037312..c473c5b4 100644
--- a/docs/example-widget-bootstrap-theme.html
+++ b/docs/example-widget-bootstrap-theme.html
@@ -63,13 +63,16 @@
 
 		// widget code contained in the jquery.tablesorter.widgets.js file
 		// use the zebra stripe widget if you plan on hiding any rows (filter widget)
-		widgets : [ "uitheme", "filter", "zebra" ],
+		widgets : [ "uitheme", "filter", "columns", "zebra" ],
 
 		widgetOptions : {
 			// using the default zebra striping class name, so it actually isn't included in the theme variable above
 			// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
 			zebra : ["even", "odd"],
 
+			// class names added to columns when sorted
+			columns: [ "primary", "secondary", "tertiary" ],
+
 			// reset filters button
 			filter_reset : ".reset",
 
@@ -153,7 +156,8 @@
 		<span class="label label-info">NOTE!</span>
 	</p>
 	<ul>
-		<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
+		<li>In <span class="version updated">v2.28.4</span>, added support for the column widget.</li>
+		<li>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
 			<ul>
 				<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
 				<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
@@ -180,8 +184,8 @@
 		<li>This demo shows how to get around an issue with the filter widget:
 			<ul>
 				<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <code>nth-child()</code> selector.</li>
-				<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
-				<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
+				<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-sm btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
+				<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-sm btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
 				<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
 				<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
 			</ul>
@@ -220,19 +224,23 @@
 			<th>Geometry</th>
 		</tr>
 		<tr>
-			<th colspan="7" class="ts-pager form-horizontal">
-				<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
-				<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
-				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
-				<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
-				<select class="pagesize input-mini" title="Select page size">
+			<th colspan="7" class="ts-pager form-inline">
+				<div class="btn-group btn-group-sm" role="group">
+					<button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>
+					<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>
+				</div>
+				<span class="pagedisplay"></span>
+				<div class="btn-group btn-group-sm" role="group">
+					<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>
+					<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>
+				</div>
+				<select class="form-control input-sm pagesize" title="Select page size">
 					<option selected="selected" value="10">10</option>
 					<option value="20">20</option>
 					<option value="30">30</option>
-					<option value="40">40</option>
+					<option value="all">All Rows</option>
 				</select>
-				<select class="pagenum input-mini" title="Select page number"></select>
+				<select class="form-control input-sm pagenum" title="Select page number"></select>
 			</th>
 		</tr>
 	</tfoot>
@@ -299,7 +307,6 @@
 
 &lt;!-- tablesorter plugin --&gt;
 &lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
-&lt;!-- tablesorter widget file - loaded after the plugin --&gt;
 &lt;script src=&quot;js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
 
 &lt;!-- pager plugin --&gt;
diff --git a/docs/index.html b/docs/index.html
index 02f8e896..84e99733 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -517,7 +517,8 @@
 		<li><span class="results">&dagger;</span> UITheme widget (<span class="version">v2.0.9</span>; <span class="version updated">v2.27.0</span>):
 			<ul>
 				<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.27.0</span>).</li>
-				<li><a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>) &amp; <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4).</li>
+				<li><a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>).</li>
+				<li><a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4.0; <span class="version updated">v2.28.4</span>).</li>
 			</ul>
 		</li>
 		<li><span class="label label-info">Beta</span> <a href="example-widget-view.html">View Widget</a> (<span class="version">v2.24.0</span>; <span class="version updated">v2.26.6</span>).</li>