Added exactMatch to html5color & fixed hiding filter row - issue #250

css/filter.formatter.css

@@ -1,16 +1,16 @@
 /**** Filter Formatter Elements ****/
-.tablesorter-blue .tablesorter-filter-row td {
+.tablesorter .tablesorter-filter-row td {
 	text-align: center;
 	font-size: 0.9em;
 	font-weight: normal;
 }
 
 /**** Sliders ****/
-/* shrink the ui sliders to look nicer inside of a table cell */
-.ui-slider {
+/* shrink the sliders to look nicer inside of a table cell */
+.ui-slider, input.range {
 	width: 90%;
 	margin: 12px auto 2px auto; /* add enough top margin so the tooltips will fit */
-	font-size: 0.5em;
+	font-size: 0.8em;
 }
 .ui-slider .ui-slider-handle{
 	width: 0.8em;
@@ -164,3 +164,15 @@ input.number {
 	position: relative;
 	top: -5px;
 }
+
+/* hide filter row */
+.tablesorter .tablesorter-filter-row.hideme td * {
+	height: 1px;
+	min-height: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	/* don't use visibility: hidden because it disables tabbing */
+	opacity: 0;
+	filter: alpha(opacity=0);
+}

docs/example-widget-filter-formatter-2.html

@@ -55,6 +55,7 @@
 					return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
 						value: '#000000',
 						addToggle: true,
+						exactMatch: true,
 						valueToHeader: false
 					});
 				},
@@ -162,6 +163,7 @@
           return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
             value: '#000000',
             addToggle: true,
+            exactMatch: true,
             valueToHeader: false
           });
         }
@@ -172,6 +174,7 @@
 });</pre></li>
 				<li>This color selector will only output the color as a hex value with a hash followed by six characters (<code>#000000</code>).</li>
 				<li>By default, this code has the <code>valueToHeader</code> option set to <code>false</code>. The currently selected color is added to a span within the cell by default.</li>
+				<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content, in case you have multiple colors in one cell.</li>
 				<li>This selector includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
 			</ul>
 		</div>

js/jquery.tablesorter.widgets-filter-formatter.js

@@ -1,4 +1,4 @@
-/*! Filter widget formatter functions - updated 2/24/2013
+/*! Filter widget formatter functions - updated 2/28/2013
  * requires: tableSorter 2.7.7+ and jQuery 1.4.3+
  *
  * jQuery UI spinner
@@ -175,7 +175,8 @@ $.tablesorter.filterFormatter = {
 		updateUiRange = function(ui) {
 			// ui.values are undefined for some reason on create
 			var val = typeof ui !== "undefined" && ui.values || o.values,
-				range = val[0] + ' - ' + val[1];
+				// make range an empty string if entire range is covered so the filter row will hide (if set)
+				range = val[0] === o.min && val[1] === o.max ? '' : val[0] + ' - ' + val[1];
 			if (o.valueToHeader) {
 				// add range indication to the header cell above (if not using the css method)!
 				$cell.closest('thead').find('th[data-column=' + indx + ']').find('.currange').html(' (' + range + ')');
@@ -399,6 +400,7 @@ $.tablesorter.filterFormatter = {
 			value: '#000000',
 			disabled: false,
 			addToggle: true,
+			exactMatch: true,
 			valueToHeader: false
 		}, defColor),
 		// Add a hidden input to hold the range values
@@ -414,7 +416,7 @@ $.tablesorter.filterFormatter = {
 				$cell.find('.colorpicker')[0].disabled = (o.disabled || !chkd);
 			}
 			$cell
-				.find('input[type=hidden]').val( chkd ? val : '' )
+				.find('input[type=hidden]').val( chkd ? val + (o.exactMatch ? '=' : '') : '' )
 				.trigger('search');
 			if (o.valueToHeader) {
 				// add current color to the header cell