Core: Add cssIconDisabled option. See #1409

docs/index.html

@@ -797,6 +797,18 @@
 				<td></td>
 			</tr>
 
+			<tr id="cssicondisabled">
+				<td><a href="#" class="permalink">cssIconDisabled</a></td>
+				<td>String</td>
+				<td>&quot;&quot;</td>
+				<td>The CSS style used to style the header cell icon when the column sort is disabled (<span class="version">v2.28.13</span>)
+					<div class="collapsible"><br>
+						This class is only applied when the <a href="#headertemplate"><code>headerTemplate</code></a> option includes a <code>{icon}</code> tag or an HTML element with the class name from the <a href="#cssicon"><code>cssIcon</code></a> option.
+					</div>
+				</td>
+				<td></td>
+			</tr>
+
 			<tr id="cssnone">
 				<td><a href="#" class="permalink">cssNone</a></td>
 				<td>String</td>
@@ -1144,7 +1156,7 @@
 					<div class="collapsible">
 					<br>
 					In versions 2.0.6+, all TH text is wrapped in a div with a class name of "tablesorter-inner" by default. In the example below, the header cell (TH) div is given a class name (<a class="external" href="http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm">source</a>).<br>
-					Function parameters:
+					<p>Function parameters:</p>
 					<ul>
 						<li><code>index</code> - zero-based index of the current table header cell; this value is <em>not</em> indicative of the column index, as it is simply a count of header cells. So it will be effected by rowspan, colspan and multiple rows in the header.</li>
 						<li><code>config</code> - The current <code>table.config</code>.</li>
@@ -1177,7 +1189,12 @@
 					This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called (v2.7).
 					<div class="collapsible">
 					<br>
-					The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it. Here is an example:
+					The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it.
+					<p>Function parameters:</p>
+					<ul>
+						<li><code>index</code> - zero-based index of the current table header cell; this value is <em>not</em> indicative of the column index, as it is simply a count of header cells. So it will be effected by rowspan, colspan and multiple rows in the header.</li>
+						<li><code>template</code> - A rendered <code>headerTemplate</code> HTML string.</li>
+					</ul>
 					<pre class="prettyprint lang-js">$(function(){
   $("table").tablesorter({
     headerTemplate: '{icon}{content}',

js/jquery.tablesorter.js

@@ -98,6 +98,7 @@
 			cssIconNone      : '', // class name added to the icon when there is no column sort
 			cssIconAsc       : '', // class name added to the icon when the column has an ascending sort
 			cssIconDesc      : '', // class name added to the icon when the column has a descending sort
+			cssIconDisabled  : '', // class name added to the icon when the column has a disabled sort
 
 			// *** events
 			pointerClick     : 'click',
@@ -1074,7 +1075,7 @@
 		▀████▀ ██     █████▀ ██  ██   ██   ██████
 		*/
 		setHeadersCss : function( c ) {
-			var $sorted, indx, column,
+			var indx, column,
 				list = c.sortList,
 				len = list.length,
 				none = ts.css.sortNone + ' ' + c.cssNone,
@@ -1082,20 +1083,32 @@
 				cssIcon = [ c.cssIconAsc, c.cssIconDesc, c.cssIconNone ],
 				aria = [ 'ascending', 'descending' ],
 				// find the footer
-				$headers = c.$table
+				$extras = c.$table
 					.find( 'tfoot tr' )
 					.children( 'td, th' )
 					.add( $( c.namespace + '_extra_headers' ) )
-					.removeClass( css.join( ' ' ) );
+					.removeClass( css.join( ' ' ) ),
-			// remove all header information
+				// remove all header information
-			c.$headers
+				$sorted = c.$headers
-				.add( $( 'thead ' + c.namespace + '_extra_headers' ) )
+					.add( $( 'thead ' + c.namespace + '_extra_headers' ) )
-				.removeClass( css.join( ' ' ) )
+					.removeClass( css.join( ' ' ) )
-				.addClass( none )
+					.addClass( none )
-				.attr( 'aria-sort', 'none' )
+					.attr( 'aria-sort', 'none' )
+					.find( '.' + ts.css.icon )
+					.removeClass( cssIcon.join( ' ' ) )
+					.end();
+			// add css none to all sortable headers
+			$sorted
+				.not( '.sorter-false' )
 				.find( '.' + ts.css.icon )
-				.removeClass( cssIcon.join( ' ' ) )
 				.addClass( cssIcon[ 2 ] );
+			// add disabled css icon class
+			if ( c.cssIconDisabled ) {
+				$sorted
+					.filter( '.sorter-false' )
+					.find( '.' + ts.css.icon )
+					.addClass( c.cssIconDisabled );
+			}
 			for ( indx = 0; indx < len; indx++ ) {
 				// direction = 2 means reset!
 				if ( list[ indx ][ 1 ] !== 2 ) {
@@ -1132,8 +1145,8 @@
 							}
 						}
 						// add sorted class to footer & extra headers, if they exist
-						if ( $headers.length ) {
+						if ( $extras.length ) {
-							$headers
+							$extras
 								.filter( '[data-column="' + list[ indx ][ 0 ] + '"]' )
 								.removeClass( none )
 								.addClass( css[ list[ indx ][ 1 ] ] );

testing/testing.js

@@ -112,7 +112,8 @@ Core plugin tested
 OPTIONS:
 	cssAsc, cssChildRow, cssDesc, cssHeader, cssHeaderRow, cssInfoBlock, dateFormat, emptyTo, headerList,
 	headers, ignoreCase, initialized, parsers, sortList, sortLocaleCompare, sortReset, sortRestart, stringTo, tableClass,
-	usNumberFormat, widgets (just zebra), sortAppend, sortForce, sortMultiSortKey, sortResetKey, numberSorter
+	usNumberFormat, widgets (just zebra), sortAppend, sortForce, sortMultiSortKey, sortResetKey, numberSorter,
+	cssIconAsc, cssIconDesc, cssIconNone, cssIconDisabled
 
 METHODS:
 	addRows, applyWidgets, destroy, sorton, sortReset, update/updateRow, updateAll, updateCell
@@ -123,7 +124,7 @@ EVENTS:
 Not yet tested
 =========================
 OPTIONS:
-	cancelSelection, cssIcon, cssProcessing, debug, delayInit, headerTemplate, initWidgets, onRenderHeader,
+	cancelSelection, cssProcessing, debug, delayInit, headerTemplate, initWidgets, onRenderHeader,
 	onRenderTemplate, selectorHeaders, selectorRemove, selectorSort, serverSideSorting, showProcessing,
 	sortInitialOrder, strings,
 	textExtraction, textSorter, theme, widthFixed, widgets (also need priority testing)
@@ -694,9 +695,6 @@ jQuery(function($){
 			'a', 'b', 'c1', 'c2'
 		];
 		assert.cacheCompare( $('#testblock table')[0], 'all', t, 'colspans not duplicated but textExtraction defined' );
-
-
-
 	});
 
 	QUnit.test( 'sorton methods', function(assert) {
@@ -917,6 +915,37 @@ jQuery(function($){
 		assert.equal( t.hasClass(ts.css.sortAsc) || t.hasClass(ts.css.sortDesc), false, 'Testing sortReset' );
 	});
 
+	QUnit.test( 'testing header css icons', function(assert) {
+		var done = assert.async();
+		assert.expect(1);
+		$('#testblock2').html('<table class="tablesorter"><thead><tr>' +
+				'<th>A</th>' +
+				'<th>B</th>' +
+				'<th>C</th>' +
+				'<th class="sorter-false">D</th>' +
+			'</tr></thead><tbody></tbody></table>')
+		.find('table')
+		.tablesorter({
+			sortList: [[0,0], [1,1]],
+			headerTemplate:'{content} {icon}',
+			cssIconAsc: 'asc',
+			cssIconDesc: 'desc',
+			cssIconNone: 'none',
+			cssIconDisabled: 'disabled',
+			initialized: function(table){
+				var i,
+					results = [],
+					expected = ['asc', 'desc', 'none', 'disabled'],
+					c = table.config;
+				for (i = 0; i < c.columns; i++){
+					results[i] = c.$headers.eq(i).find('.' + ts.css.icon).hasClass(expected[i]);
+				}
+				assert.deepEqual( results, [true, true, true, true], 'applies correct cssIcon classes' );
+				done();
+			}
+		});
+	});
+
 	/************************************************
 		test apply widgets function using zebra widget
 	************************************************/