Core: add cssIcon class name options for no, asc & desc sorts

docs/index.html

@@ -724,6 +724,42 @@
 				<td></td>
 			</tr>
 
+			<tr id="cssiconasc">
+				<td><a href="#" class="permalink">cssIconAsc</a></td>
+				<td>String</td>
+				<td>&quot;&quot;</td>
+				<td>The CSS style added to the header cell icon when the column has an ascending sort (<span class="version">v2.18.3</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="cssicondesc">
+				<td><a href="#" class="permalink">cssIconDesc</a></td>
+				<td>String</td>
+				<td>&quot;&quot;</td>
+				<td>The CSS style used to style the header cell icon when the column has a descending sort (<span class="version">v2.18.3</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="cssiconnone">
+				<td><a href="#" class="permalink">cssIconNone</a></td>
+				<td>String</td>
+				<td>&quot;&quot;</td>
+				<td>The CSS style used to style the header cell icon when the column does not have a sort applied (<span class="version">v2.18.3</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>
@@ -1708,11 +1744,11 @@ $(function(){
       // a selector in a header with this class name will only show selected options in the drop down
       filter_onlyAvail     : 'filter-onlyAvail',
       // default placeholder text (overridden by any header "data-placeholder" setting)
-      filter_placeholder   : { search : '', select : '' }, 
+      filter_placeholder   : { search : '', select : '' },
       // jQuery selector string of an element used to reset the filters.
       filter_reset         : null,
       // Use the $.tablesorter.storage utility to save the most recent filters
-      filter_saveFilters   : false,  
+      filter_saveFilters   : false,
       // typing delay in milliseconds before starting a search.
       filter_searchDelay   : 300,
       // allow searching through already filtered rows in special circumstances; will speed up searching in large tables if true
@@ -4735,7 +4771,7 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
     .bind('filterInit', function(){
       $(this).find('tr.tablesorter-filter-row').addClass('fred');
     })
-    
+
      // initialize the sorter
     .tablesorter({
       widgets : ['filter']

js/jquery.tablesorter.js

@@ -89,8 +89,11 @@
 				cssHeaderRow     : '',
 				cssProcessing    : '', // processing icon applied to header during sort/filter
 
-				cssChildRow      : 'tablesorter-childRow', // class name indiciating that a row is to be attached to the its parent 
+				cssChildRow      : 'tablesorter-childRow', // class name indiciating that a row is to be attached to the its parent
 				cssIcon          : 'tablesorter-icon',     //  if this class exists, a <i> will be added to the header automatically
+				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
 				cssInfoBlock     : 'tablesorter-infoOnly', // don't sort tbody with this class name (only one class name allowed here!)
 				cssAllowClicks   : 'tablesorter-allowClicks', // class name added to table header which allows clicks to bubble up
 
@@ -528,13 +531,17 @@
 					len = list.length,
 					none = ts.css.sortNone + ' ' + c.cssNone,
 					css = [ts.css.sortAsc + ' ' + c.cssAsc, ts.css.sortDesc + ' ' + c.cssDesc],
+					cssIcon = [ c.cssIconAsc, c.cssIconDesc, c.cssIconNone ],
 					aria = ['ascending', 'descending'],
 					// find the footer
 					$t = $(table).find('tfoot tr').children().add(c.$extraHeaders).removeClass(css.join(' '));
 				// remove all header information
 				c.$headers
 					.removeClass(css.join(' '))
-					.addClass(none).attr('aria-sort', 'none');
+					.addClass(none).attr('aria-sort', 'none')
+					.find('.' + c.cssIcon)
+					.removeClass(cssIcon.join(' '))
+					.addClass(cssIcon[2]);
 				for (i = 0; i < len; i++) {
 					// direction = 2 means reset!
 					if (list[i][1] !== 2) {
@@ -543,7 +550,13 @@
 						if (f.length) {
 							for (j = 0; j < f.length; j++) {
 								if (!f[j].sortDisabled) {
-									f.eq(j).removeClass(none).addClass(css[list[i][1]]).attr('aria-sort', aria[list[i][1]]);
+									f.eq(j)
+										.removeClass(none)
+										.addClass(css[list[i][1]])
+										.attr('aria-sort', aria[list[i][1]])
+										.find('.' + c.cssIcon)
+										.removeClass(cssIcon[2])
+										.addClass(cssIcon[list[i][1]]);
 								}
 							}
 							// add sorted class to footer & extra headers, if they exist