diff --git a/addons/pager/jquery.tablesorter.pager.js b/addons/pager/jquery.tablesorter.pager.js index 3922024f..11c4174e 100644 --- a/addons/pager/jquery.tablesorter.pager.js +++ b/addons/pager/jquery.tablesorter.pager.js @@ -275,11 +275,11 @@ c.$headers.each(function(j){ var $t = $(this), icn; // add new test within the first span it finds, or just in the header - if ( $t.find('.' + c.cssIcon).length ) { - icn = $t.find('.' + c.cssIcon).clone(true); + if ( $t.find('.' + ts.css.icon).length ) { + icn = $t.find('.' + ts.css.icon).clone(true); $t.find('.tablesorter-header-inner').html( th[j] ).append(icn); if ( hsh && $sh.length ) { - icn = $sh.eq(j).find('.' + c.cssIcon).clone(true); + icn = $sh.eq(j).find('.' + ts.css.icon).clone(true); $sh.eq(j).find('.tablesorter-header-inner').html( th[j] ).append(icn); } } else { diff --git a/docs/example-widget-filter-custom.html b/docs/example-widget-filter-custom.html index 0428760b..8ed754bf 100644 --- a/docs/example-widget-filter-custom.html +++ b/docs/example-widget-filter-custom.html @@ -68,8 +68,8 @@ widgetOptions : { - // css class applied to the table row containing the filters & the inputs within that row - filter_cssFilter : 'tablesorter-filter', + // extra css class applied to the table row containing the filters & the inputs within that row + filter_cssFilter : '', // If there are child rows in the table (rows with class name from "cssChildRow" option) // and this option is true and a match is found anywhere in the child row, then it will make that row diff --git a/docs/example-widget-filter.html b/docs/example-widget-filter.html index b9895990..e63f3b73 100644 --- a/docs/example-widget-filter.html +++ b/docs/example-widget-filter.html @@ -55,8 +55,8 @@ // if you set this to false, make sure you perform a search using the second method below filter_columnFilters : true, - // css class applied to the table row containing the filters & the inputs within that row - filter_cssFilter : 'tablesorter-filter', + // extra css class applied to the table row containing the filters & the inputs within that row + filter_cssFilter : '', // class added to filtered rows (rows that are not showing); needed by pager plugin filter_filteredRow : 'filtered', @@ -219,7 +219,7 @@ $(function(){ Individual columns can be modified by adding the following (they all do the same thing), set in order of priority: emptyToBottom option was added in v2.1.11, then replaced by the emptyTo option in v2.1.16. @@ -864,17 +873,17 @@ From the example function above, you'll end up with something similar to this HT
- - - - - - - - - - - + + + + + + + + + + +
sorter: falsedisable sort for this column.
sorter: "text"Sort alpha-numerically.
sorter: "digit"Sort numerically.
sorter: "currency"Sort by currency value (supports "£$€¤¥¢").
sorter: "ipAddress"Sort by IP Address.
sorter: "url"Sort by url.
sorter: "isoDate"Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).
sorter: "percent"Sort by percent.
sorter: "usLongDate"Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM or 18 Jan 2001 9:12 AM (new in v2.7.4)).
sorter: "shortDate"Sort by a shortened date (see dateFormat; these formats can also be followed by a time).
sorter: "time"Sort by time (23:59 or 12:59 pm).
sorter: "metadata"Sort by the sorter value in the metadata - requires the metadata plugin.
sorter: "text"Sort alpha-numerically.
sorter: "digit"Sort numerically.
sorter: "currency"Sort by currency value (supports "£$€¤¥¢").
sorter: "ipAddress"Sort by IP Address.
sorter: "url"Sort by url.
sorter: "isoDate"Sort by ISO date (YYYY-MM-DD or YYYY/MM/DD; these formats can be followed by a time).
sorter: "percent"Sort by percent.
sorter: "usLongDate"Sort by date (U.S. Standard, e.g. Jan 18, 2001 9:12 AM or 18 Jan 2001 9:12 AM (new in v2.7.4)).
sorter: "shortDate"Sort by a shortened date (see dateFormat; these formats can also be followed by a time).
sorter: "time"Sort by time (23:59 or 12:59 pm).
sorter: "metadata"Sort by the sorter value in the metadata - requires the metadata plugin.

Check out the headers option to see how to use these parsers in your table (example #1).
Or add a header class name using "sorter-" plus the parser name (example #2), this includes custom parsers (example #3). @@ -1007,17 +1016,17 @@ From the example function above, you'll end up with something similar to this HT String "asc" - This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are "asc" for Ascending or "desc" for Descending.
+ This sets the direction a column will sort when clicking on the header for the first time. Valid arguments are "asc" for Ascending or "desc" for Descending.

This order can also be set by desired column using the headers option (Added in v2.0.8).

Individual columns can be modified by adding the following (they all do the same thing), set in order of priority (Modified v2.3.1):
@@ -1082,7 +1091,7 @@ From the example function above, you'll end up with something similar to this HT sortResetKey String "ctrlKey" - The key used to reset sorting on the entire table. Defaults to the control key. The other options are "shiftKey" or "altKey". Reference: https://developer.mozilla.org/en/DOM/MouseEvent + The key used to reset sorting on the entire table. Defaults to the control key. The other options are "shiftKey" or "altKey". Reference: https://developer.mozilla.org/en/DOM/MouseEvent @@ -1100,7 +1109,7 @@ From the example function above, you'll end up with something similar to this HT sortMultiSortKey String "shiftKey" - The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are "ctrlKey" or "altKey". Reference: https://developer.mozilla.org/en/DOM/MouseEvent + The key used to select more than one column for multi-column sorting. Defaults to the shift key. The other options are "ctrlKey" or "altKey". Reference: https://developer.mozilla.org/en/DOM/MouseEvent Example @@ -1113,18 +1122,18 @@ From the example function above, you'll end up with something similar to this HT

String options was initially set in the header options only. Overall option added and values changed in version 2.1.16; setting the value to: Individual columns can be modified by adding the following (they all do the same thing), set in order of priority:
@@ -1135,10 +1144,12 @@ From the example function above, you'll end up with something similar to this HT tableClass String - "tablesorter" - This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option. -
-
Change this option if you are not using the default css, or if you are using a completely custom stylesheet. + "" + Additional CSS class applied to style the table - v2.11 +

+ Changed to empty string in v2.11, as the "tablesorter" class will always be added to the table; this option now contains any additional class names to add. +

This class was required in the default markup in version 2.0.5. But in version 2.0.6, it was added as an option.

+ Modify this option if you are not using the default css, or if you are using a completely custom stylesheet.
@@ -1148,7 +1159,7 @@ From the example function above, you'll end up with something similar to this HT theme String "default" - This option will add a theme css class name to the table "tablesorter-{theme}" for styling (v2.4). + This option will add a theme css class name to the table "tablesorter-{theme}" for styling (v2.4).

When changing this theme option, make sure that the appropriate css theme file has also been loaded. Included theme files include: see all themes
@@ -1163,7 +1174,7 @@ From the example function above, you'll end up with something similar to this HT String Or Function "simple" Defines which method is used to extract data from a table cell for sorting. - The built-in option is "simple" which is the equivalent of doing this inside of the textExtraction function: $(node).text();. + The built-in option is "simple" which is the equivalent of doing this inside of the textExtraction function: $(node).text();.

You can customize the text extraction by writing your own text extraction function "myTextExtraction" which you define like: @@ -1303,7 +1314,7 @@ $(function(){ // show column filters filter_columnFilters : true, // css class applied to the filter row inputs/select - filter_cssFilter : 'tablesorter-filter', + filter_cssFilter : '', // data attribute in the header cell that contains the default filter value filter_defaultAttrib : 'data-value', // class added to filtered rows; needed by pager plugin @@ -1378,7 +1389,7 @@ $(function(){ It has been replaced by widgetOptions.columns; but is still available for backwards compatibility.

- When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (v2.0.17). + When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (v2.0.17). Use the widgetColumns option to change the css class name as follows: 
$(function(){
   $("table").tablesorter({
@@ -1399,7 +1410,7 @@ $(function(){
 					It has been replaced by widgetOptions.uitheme; but is still available for backwards compatibility.
 					

 					

-					Used when the ui theme styling widget is initialized. It automatically applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (v2.0.9).
+					Used when the ui theme styling widget is initialized. It automatically applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (v2.0.9).
 					Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

 					

 					Use the widgetUitheme option to change the css class name as follows:
@@ -1428,7 +1439,7 @@ $(function(){
 					It has been replaced by widgetOptions.zebra; but is still available for backwards compatibility.
 					

 					

-					When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd".
+					When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd".
 					Use the widgetZebra option to change the css class name as follows:
 					
$(function(){
   $("table").tablesorter({
@@ -1502,10 +1513,10 @@ $(function(){
 				Array
 				[ "primary", "secondary", "tertiary" ]
 				
-					Columns widget: When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (Modified v2.1).
+					Columns widget: When the column styling widget is initialized, it automatically applied the default class names of "primary" for the primary sort, "secondary" for the next sort, "tertiary" for the next sort, and so on (add more as needed)... (Modified v2.1).
 					

 					

-					Use the "columns" option to change the css class name as follows:
+					Use the "columns" option to change the css class name as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["columns"], // initialize column styling of the table
@@ -1526,7 +1537,7 @@ $(function(){
 					Columns widget: If true, the class names from the columns option will also be added to the table thead (v2.4).
 					

 					

-					Use the "columns_thead" option to add the column class names to the thead as follows:
+					Use the "columns_thead" option to add the column class names to the thead as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["columns"], // initialize column styling of the table
@@ -1547,7 +1558,7 @@ $(function(){
 					Columns widget: If true, the class names from the columns option will also be added to the table tfoot (v2.4).
 					

 					

-					Use the "columns_tfoot" option to add the column class names to the tfoot as follows:
+					Use the "columns_tfoot" option to add the column class names to the tfoot as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["columns"], // initialize column styling of the table
@@ -1565,7 +1576,7 @@ $(function(){
 				Boolean
 				false
 				
-					Filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option) and this option is true and a match is found anywhere in the child row, then it will make that row visible.
+					Filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option) and this option is true and a match is found anywhere in the child row, then it will make that row visible.
 					(Modified v2.1).
 					

 					

@@ -1606,13 +1617,12 @@ $(function(){
 			
 				filter_cssFilter
 				String
-				"tablesorter-filter"
-				
-					Filter widget: This is the class name applied to each input within the filter row (v2.1).
-					

-					

-					Use the "tablesorter-filter" option to change the css class name as follows:
-					
$(function(){
+				""
+				Additional CSS class applied to each filter - v2.11
+					


+						Changed to empty string in v2.11, as the "tablesorter-filter" class will always be added to the filter; this option now contains any additional class names to add.
+						
Use the "tablesorter-filter" option to add an extra css class name as follows:

+						
$(function(){
   $("table").tablesorter({
     widgets: ["filter"],
     widgetOptions : {
@@ -1620,7 +1630,7 @@ $(function(){
       filter_cssFilter : "tablesorter-filter"
     }
   });
-});
If you change it from the default class name of "tablesorter-filter" make sure you also update the css!

+});

 					

 				
 				Example
@@ -1692,7 +1702,7 @@ $(function(){
 				
 					Filter widget: Customize the filter widget by adding a select dropdown with content, custom options or custom filter functions (v2.3.6).
 					

-					Use the "filter_functions" option in three different ways:
+					Use the "filter_functions" option in three different ways:
 					

 					
    
 						
  • 
@@ -1985,10 +1995,10 @@ $('table').trigger('search', false);

 					
    
 						
  • To only use parsed data in specific columns, set this option to false and use any of the following (they all do the same thing), set in order of priority:
 							
      
-								
    • jQuery data data-filter="parsed".
      • 
-								
    • metadata class="{ filter: 'parsed'}". This requires the metadata plugin.
      • 
+								
    • jQuery data data-filter="parsed".
      • 
+								
    • metadata class="{ filter: 'parsed'}". This requires the metadata plugin.
      • 
 								
    • headers option headers : { 0 : { filter : 'parsed' } }.
      • 
-								
    • header class name class="filter-parsed".
      • 
+								
    • header class name class="filter-parsed".
      • 
 							
    
 						
    • 
 						
  • Remember that parsed data most likely doesn't match the actual table cell text, 20% becomes 20 and Jan 1, 2013 12:01 AM becomes 1357020060000.
    • 
@@ -2022,15 +2032,13 @@ $('table').trigger('search', false);

 			
 				stickyHeaders
 				String
-				"tablesorter-stickyHeader"
-				
-					Sticky Headers widget: This is the class name applied to the sticky header row (tr) (v2.1).
-					

-					

-					If you change it from the default class name of "tablesorter-stickyHeader" make sure you also update the css!

-					

-					Use the "stickyHeaders" option to change the css class name as follows:
-					
$(function(){
+				""
+				Sticky Headers widget: This additional CSS class applied to the sticky header row - v2.11
+					


+						Changed to empty string in v2.11, as the "tablesorter-stickyHeader" class will always be added to the sticky header row; this option now contains any additional class names to add.
+						
Previously, this option contained the class name to be applied to the sticky header row (tr) (v2.1).

+						Use the "stickyHeaders" option to add an extra css class name as follows:
+						
$(function(){
   $("table").tablesorter({
     widgets: ["stickyHeaders"],
     widgetOptions : {
@@ -2051,9 +2059,9 @@ $('table').trigger('search', false);

 					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 (v2.9).
 					

 					

-					So if your table ID is "gummy", then the cloned sticky table id becomes "gummy-sticky"

+					So if your table ID is "gummy", then the cloned sticky table id becomes "gummy-sticky"

 					

-					Use the "stickyHeaders_cloneId" option to change the cloned table id as follows:
+					Use the "stickyHeaders_cloneId" option to change the cloned table id as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["stickyHeaders"],
@@ -2097,7 +2105,7 @@ $('table').trigger('search', false);

 					Sticky Headers widget: Set the sticky header offset from the top as a Number or jQuery selector string or object (v2.10).
 					

 					

-					If the page includes a fixed navigation bar at the top, like Bootstrap, set "stickyHeaders_offset" option to offset the sticky table header to be below the fixed navigation by setting this option using any of the following examples:

+					If the page includes a fixed navigation bar at the top, like Bootstrap, set "stickyHeaders_offset" option to offset the sticky table header to be below the fixed navigation by setting this option using any of the following examples:

 					
$(function(){
   $("table").tablesorter({
     widgets: ["stickyHeaders"],
@@ -2124,7 +2132,7 @@ $('table').trigger('search', false);

 					While this option is true, a timer is initialized to check the width of every header cell every 1/4 second. If this causes lag, or any other problems, set this option to false.
 					When this option is false, sticky table headers are unable to detect and match the width of the original table headers when content is added or removed.

 					

-					Use the "stickyHeaders_addResizeEvent" option as follows:
+					Use the "stickyHeaders_addResizeEvent" option as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["resizable"],
@@ -2147,7 +2155,7 @@ $('table').trigger('search', false);

 					Resizable widget: If this option is set to false, resized column widths will not be saved. Previous saved values will be restored on page reload (v2.4).
 					

 					

-					Use the "resizable" option to not save the resized widths:
+					Use the "resizable" option to not save the resized widths:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["resizable"],
@@ -2171,7 +2179,7 @@ $('table').trigger('search', false);

 					

 					If an anchor was included and the table is full width, the column would resize in the opposite direction which my not be intuitive to the user. So set this option as desired, but please be mindful of the user experience.

 					

-					Use the "resizable_addLastColumn" option to include the last column resizer as follows:
+					Use the "resizable_addLastColumn" option to include the last column resizer as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["resizable"],
@@ -2193,7 +2201,7 @@ $('table').trigger('search', false);

 					saveSort widget: If this option is set to false, new sorts will not be saved. Any previous saved sort will be restored on page reload (v2.4).
 					

 					

-					Use the "saveSort" option to not save the current sort:
+					Use the "saveSort" option to not save the current sort:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["saveSort"],
@@ -2240,9 +2248,9 @@ $.extend($.tablesorter.themes.jui, {
 					The class names from the $.tablesorter.themes.{name} variable are applied to the table as indicated.

 					

 
-					As before the jQuery UI theme applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (Modified v2.1; Updated in v2.4). Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

+					As before the jQuery UI theme applies the default class names of "ui-icon-arrowthick-2-n-s" for the unsorted column, "ui-icon-arrowthick-1-s" for the descending sort and "ui-icon-arrowthick-1-n" for the ascending sort. (Modified v2.1; Updated in v2.4). Find more jQuery UI class names by hovering over the Framework icons on this page: http://jqueryui.com/themeroller/

 					

-					Use the "uitheme" option to change the css class name as follows:
+					Use the "uitheme" option to change the css class name as follows:
 					
$(function(){
   $("table").tablesorter({
     theme     : 'jui',       // set theme name from $.tablesorter.themes here
@@ -2278,10 +2286,10 @@ $.extend($.tablesorter.themes.jui, {
 				Array
 				[ "even", "odd" ]
 				
-					zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd". (Modified v2.1).
+					zebra widget: When the zebra striping widget is initialized, it automatically applied the default class names of "even" and "odd". (Modified v2.1).
 					

 					

-					Use the "zebra" option to change the theme as follows:
+					Use the "zebra" option to change the theme as follows:
 					
$(function(){
   $("table").tablesorter({
     widgets: ["zebra"], // initialize zebra striping of the table
@@ -2371,13 +2379,13 @@ $.extend($.tablesorter.themes.jui, {
 		
 			{sortList:col} or {sort:col}
 			Adds the current sort to the ajax url string into a "col" array, so your server-side code knows how to sort the data (v2.4.5).

-				The col portion of the {sortList:col} tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current sortList is [[2,0],[3,0]], it becomes "&sort[2]=0&sort[3]=0" in the url. {sort:col} shortened tag also works (v2.9).
+				The col portion of the {sortList:col} tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current sortList is [[2,0],[3,0]], it becomes "&sort[2]=0&sort[3]=0" in the url. {sort:col} shortened tag also works (v2.9).
 			
 		
 		
 			{filterList:fcol} or {filter:fcol}
 			Adds the value of the current filters to the ajax url string into a "fcol" array, so your server-side code knows how to filter the data (v2.6).

-				The fcol portion of the {filterList:fcol} tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current filters are ['','Blue',13], it becomes "&fcol[2]=Blue&fcol[3]=13" in the url. {filter:col} shortened tag also works (v2.9).
+				The fcol portion of the {filterList:fcol} tag can be any name string (no spaces) to indicate the name of the variable to apply. So if your current filters are ['','Blue',13], it becomes "&fcol[2]=Blue&fcol[3]=13" in the url. {filter:col} shortened tag also works (v2.9).
 			
 		
 	
diff --git a/js/jquery.tablesorter.js b/js/jquery.tablesorter.js
index 3c64dd88..a05b1ae7 100644
--- a/js/jquery.tablesorter.js
+++ b/js/jquery.tablesorter.js
@@ -75,16 +75,17 @@
 				// *** callbacks
 				initialized      : null,       // function(table){},
 
-				// *** css class names
-				tableClass       : 'tablesorter',
-				cssAsc           : 'tablesorter-headerAsc',
-				cssChildRow      : 'tablesorter-childRow', // previously "expand-child"
-				cssDesc          : 'tablesorter-headerDesc',
-				cssHeader        : 'tablesorter-header',
-				cssHeaderRow     : 'tablesorter-headerRow',
-				cssIcon          : 'tablesorter-icon', //  if this class exists, a  will be added to the header automatically
-				cssInfoBlock     : 'tablesorter-infoOnly', // don't sort tbody with this class name
-				cssProcessing    : 'tablesorter-processing', // processing icon applied to header during sort/filter
+				// *** extra css class names
+				tableClass       : '',
+				cssAsc           : '',
+				cssDesc          : '',
+				cssHeader        : '',
+				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 
+				cssIcon          : 'tablesorter-icon',     //  if this class exists, a  will be added to the header automatically
+				cssInfoBlock     : 'tablesorter-infoOnly', // don't sort tbody with this class name (only one class name allowed here!)
 
 				// *** selectors
 				selectorHeaders  : '> thead th, > thead td',
@@ -105,6 +106,20 @@
 
 			};
 
+			// internal css classes - these will ALWAYS be added to
+			// the table and MUST only contain one class name - fixes #381
+			ts.css = {
+				table      : 'tablesorter',
+				childRow   : 'tablesorter-childRow',
+				header     : 'tablesorter-header',
+				headerRow  : 'tablesorter-headerRow',
+				icon       : 'tablesorter-icon',
+				info       : 'tablesorter-infoOnly',
+				processing : 'tablesorter-processing',
+				sortAsc    : 'tablesorter-headerAsc',
+				sortDesc   : 'tablesorter-headerDesc'
+			};
+
 			/* debuging utils */
 			function log(s) {
 				if (typeof console !== "undefined" && typeof console.log !== "undefined") {
@@ -242,7 +257,7 @@
 				}
 				for (k = 0; k < b.length; k++) {
 					tc.cache[k] = { row: [], normalized: [] };
-					// ignore tbodies with class name from css.cssInfoBlock
+					// ignore tbodies with class name from c.cssInfoBlock
 					if (!$(b[k]).hasClass(tc.cssInfoBlock)) {
 						totalRows = (b[k] && b[k].rows.length) || 0;
 						totalCells = (b[k].rows[0] && b[k].rows[0].cells.length) || 0;
@@ -388,7 +403,7 @@
 				if (c.debug) {
 					time = new Date();
 				}
-				i = c.cssIcon ? '' : ''; // add icon if cssIcon option exists
+				i = c.cssIcon ? '' : ''; // add icon if cssIcon option exists
 				c.$headers = $(table).find(c.selectorHeaders).each(function(index) {
 					$t = $(this);
 					ch = c.headers[index];
@@ -411,11 +426,11 @@
 					if (typeof lock !== 'undefined' && lock !== false) {
 						this.order = this.lockedOrder = formatSortingOrder(lock) ? [1,1,1] : [0,0,0];
 					}
-					$t.addClass(c.cssHeader);
+					$t.addClass(ts.css.header + ' ' + c.cssHeader);
 					// add cell to headerList
 					c.headerList[index] = this;
 					// add to parent in case there are multiple rows
-					$t.parent().addClass(c.cssHeaderRow);
+					$t.parent().addClass(ts.css.headerRow + ' ' + c.cssHeaderRow);
 					// allow keyboard cursor to focus on element
 					$t.attr("tabindex", 0);
 				});
@@ -451,7 +466,7 @@
 				var f, i, j, l,
 					c = table.config,
 					list = c.sortList,
-					css = [c.cssAsc, c.cssDesc],
+					css = [ts.css.sortAsc + ' ' + c.cssAsc, ts.css.sortDesc + ' ' + c.cssDesc],
 					// find the footer
 					$t = $(table).find('tfoot tr').children().removeClass(css.join(' '));
 				// remove all header information
@@ -524,7 +539,7 @@
 					i = cell;
 					c.$headers.each(function() {
 						// only reset counts on columns that weren't just clicked on and if not included in a multisort
-						if (this !== i && (k || !$(this).is('.' + c.cssDesc + ',.' + c.cssAsc))) {
+						if (this !== i && (k || !$(this).is('.' + ts.css.sortDesc + ',.' + ts.css.sortAsc))) {
 							this.count = -1;
 						}
 					});
@@ -866,7 +881,7 @@
 				if (!/tablesorter\-/.test($this.attr('class'))) {
 					k = (c.theme !== '' ? ' tablesorter-' + c.theme : '');
 				}
-				c.$table = $this.addClass(c.tableClass + k);
+				c.$table = $this.addClass(ts.css.table + ' ' + c.tableClass + k);
 				c.$tbodies = $this.children('tbody:not(.' + c.cssInfoBlock + ')');
 				// build headers
 				buildHeaders(table);
@@ -922,7 +937,7 @@
 				table = $(table);
 				var c = table[0].config,
 					// default to all headers
-					$h = $ths || table.find('.' + c.cssHeader);
+					$h = $ths || table.find('.' + ts.css.header);
 				if (toggle) {
 					if (c.sortList.length > 0) {
 						// get headers from the sortList
@@ -931,9 +946,9 @@
 							return this.sortDisabled ? false : ts.isValueInArray( parseFloat($(this).attr('data-column')), c.sortList);
 						});
 					}
-					$h.addClass(c.cssProcessing);
+					$h.addClass(ts.css.processing + ' ' + c.cssProcessing);
 				} else {
-					$h.removeClass(c.cssProcessing);
+					$h.removeClass(ts.css.processing + ' ' + c.cssProcessing);
 				}
 			};
 
@@ -977,7 +992,7 @@
 				ts.refreshWidgets(table, true, true);
 				var $t = $(table), c = table.config,
 				$h = $t.find('thead:first'),
-				$r = $h.find('tr.' + c.cssHeaderRow).removeClass(c.cssHeaderRow),
+				$r = $h.find('tr.' + ts.css.headerRow).removeClass(ts.css.headerRow + ' ' + c.cssHeaderRow),
 				$f = $t.find('tfoot:first > tr').children('th, td');
 				// remove widget added rows, just in case
 				$h.find('tr').not($r).remove();
@@ -986,12 +1001,12 @@
 					.removeData('tablesorter')
 					.unbind('sortReset update updateAll updateRows updateCell addRows sorton appendCache applyWidgetId applyWidgets refreshWidgets destroy mouseup mouseleave keypress sortBegin sortEnd '.split(' ').join('.tablesorter '));
 				c.$headers.add($f)
-					.removeClass(c.cssHeader + ' ' + c.cssAsc + ' ' + c.cssDesc)
+					.removeClass( [ts.css.header, c.cssHeader, c.cssAsc, c.cssDesc, ts.css.sortAsc, ts.css.sortDesc].join(' ') )
 					.removeAttr('data-column');
 				$r.find(c.selectorSort).unbind('mousedown.tablesorter mouseup.tablesorter keypress.tablesorter');
 				ts.restoreHeaders(table);
 				if (removeClasses !== false) {
-					$t.removeClass(c.tableClass + ' tablesorter-' + c.theme);
+					$t.removeClass(ts.css.table + ' ' + c.tableClass + ' tablesorter-' + c.theme);
 				}
 				// clear flag in case the plugin is initialized again
 				table.hasInitialized = false;
diff --git a/js/jquery.tablesorter.widgets.js b/js/jquery.tablesorter.widgets.js
index 18936170..541624cb 100644
--- a/js/jquery.tablesorter.widgets.js
+++ b/js/jquery.tablesorter.widgets.js
@@ -195,7 +195,7 @@ ts.addWidget({
 			}
 			if (c.cssIcon){
 				// if c.cssIcon is '', then no  is added to the header
-				$h.find('.' + c.cssIcon).addClass(o.icons);
+				$h.find('.' + ts.css.icon).addClass(o.icons);
 			}
 			if ($t.hasClass('hasFilters')){
 				$h.find('.tablesorter-filter-row').addClass(o.filterRow);
@@ -203,14 +203,14 @@ ts.addWidget({
 		}
 		$.each($h, function(i){
 			$el = $(this);
-			$tar = (c.cssIcon) ? $el.find('.' + c.cssIcon) : $el;
+			$tar = (ts.css.icon) ? $el.find('.' + ts.css.icon) : $el;
 			if (this.sortDisabled){
 				// no sort arrows for disabled columns!
 				$el.removeClass(rmv);
 				$tar.removeClass(rmv + ' tablesorter-icon ' + o.icons);
 			} else {
 				t = ($t.hasClass('hasStickyHeaders')) ? $t.find(sh).find('th').eq(i).add($el) : $el;
-				klass = ($el.hasClass(c.cssAsc)) ? o.sortAsc : ($el.hasClass(c.cssDesc)) ? o.sortDesc : $el.hasClass(c.cssHeader) ? o.sortNone : '';
+				klass = ($el.hasClass(ts.css.sortAsc)) ? o.sortAsc : ($el.hasClass(ts.css.sortDesc)) ? o.sortDesc : $el.hasClass(ts.css.header) ? o.sortNone : '';
 				$el[klass === o.sortNone ? 'removeClass' : 'addClass'](o.active);
 				$tar.removeClass(rmv).addClass(klass);
 			}
@@ -227,7 +227,7 @@ ts.addWidget({
 			rmv = o.sortNone + ' ' + o.sortDesc + ' ' + o.sortAsc;
 		$t
 			.removeClass('tablesorter-' + theme + ' ' + o.table)
-			.find(c.cssHeader).removeClass(o.header);
+			.find(ts.css.header).removeClass(o.header);
 		$h
 			.unbind('mouseenter.tsuitheme mouseleave.tsuitheme') // remove hover
 			.removeClass(o.hover + ' ' + rmv + ' ' + o.active)
@@ -328,7 +328,7 @@ ts.addWidget({
 	options : {
 		filter_childRows     : false, // if true, filter includes child row content in the search
 		filter_columnFilters : true,  // if true, a filter will be added to the top of each table column
-		filter_cssFilter     : 'tablesorter-filter', // css class name added to the filter row & each input in the row
+		filter_cssFilter     : '',    // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
 		filter_filteredRow   : 'filtered', // class added to filtered rows; needed by pager plugin
 		filter_formatter     : null,  // add custom filter elements to the filter row
 		filter_functions     : null,  // add custom filter functions using this option
@@ -361,7 +361,6 @@ ts.addWidget({
 			fmt = ts.formatFloat,
 			last = '', // save last filter search
 			$ths = c.$headers,
-			css = wo.filter_cssFilter,
 			$t = c.$table.addClass('hasFilters'),
 			b = $t.find('tbody'),
 			cols = c.parsers.length,
@@ -399,7 +398,7 @@ ts.addWidget({
 				var $tb, $tr, $td, cr, r, l, ff, time, r1, r2, searchFiltered;
 				if (c.debug) { time = new Date(); }
 				for (k = 0; k < b.length; k++ ){
-					if (b.eq(k).hasClass(c.cssInfoBlock)) { continue; } // ignore info blocks, issue #264
+					if (b.eq(k).hasClass(ts.css.info)) { continue; } // ignore info blocks, issue #264
 					$tb = ts.processTbody(table, b.eq(k), true);
 					$tr = $tb.children('tr:not(.' + c.cssChildRow + ')');
 					l = $tr.length;
@@ -574,7 +573,7 @@ ts.addWidget({
 				arry = (ts.sortText) ? arry.sort(function(a, b){ return ts.sortText(table, a, b, i); }) : arry.sort(true);
 
 				// Get curent filter value
-				currentVal = $t.find('thead').find('select.' + css + '[data-column="' + i + '"]').val();
+				currentVal = $t.find('thead').find('select.tablesorter-filter[data-column="' + i + '"]').val();
 
 				// build option list
 				for (k = 0; k < arry.length; k++){
@@ -582,7 +581,7 @@ ts.addWidget({
 					// replace quotes - fixes #242 & ignore empty strings - see http://stackoverflow.com/q/14990971/145346
 					o += arry[k] !== '' ? '' : '';
 				}
-				$t.find('thead').find('select.' + css + '[data-column="' + i + '"]')[ updating ? 'html' : 'append' ](o);
+				$t.find('thead').find('select.tablesorter-filter[data-column="' + i + '"]')[ updating ? 'html' : 'append' ](o);
 			},
 			buildDefault = function(updating){
 				// build default select dropdown
@@ -654,7 +653,7 @@ ts.addWidget({
 						}
 					}
 					if (t) {
-						t.addClass(css).attr('data-column', i);
+						t.addClass('tablesorter-filter ' + wo.filter_cssFilter).attr('data-column', i);
 						if (dis) {
 							t.addClass('disabled')[0].disabled = true; // disabled!
 						}
@@ -668,7 +667,7 @@ ts.addWidget({
 					buildDefault(true);
 				}
 				if (e.type === 'filterReset') {
-					$t.find('.' + css).val('');
+					$t.find('.tablesorter-filter').val('');
 				}
 				if (e.type === 'filterEnd') {
 					buildDefault(true);
@@ -679,7 +678,7 @@ ts.addWidget({
 				}
 				return false;
 			})
-			.find('input.' + css).bind('keyup search', function(e, filter){
+			.find('input.tablesorter-filter').bind('keyup search', function(e, filter){
 				// emulate what webkit does.... escape clears the filter
 				if (e.which === 27) {
 					this.value = '';
@@ -718,7 +717,7 @@ ts.addWidget({
 									ff += '';
 								}
 							}
-							$t.find('thead').find('select.' + css + '[data-column="' + col + '"]').append(ff);
+							$t.find('thead').find('select.tablesorter-filter[data-column="' + col + '"]').append(ff);
 						}
 					}
 				}
@@ -727,7 +726,7 @@ ts.addWidget({
 			// it would append the same options twice.
 			buildDefault(true);
 
-			$t.find('select.' + css).bind('change search', function(e, filter){
+			$t.find('select.tablesorter-filter').bind('change search', function(e, filter){
 				checkFilters(filter);
 			});
 
@@ -748,8 +747,8 @@ ts.addWidget({
 								// $(':focus') needs jQuery 1.6+
 								if ($(document.activeElement).closest('tr')[0] !== ft[0]){
 									// get all filter values
-									all = $t.find('.' + wo.filter_cssFilter).map(function(){
-										return $(this).val() || '';
+									all = $t.find('.tablesorter-filter').map(function(){
+										return $(this).val() || ''; 
 									}).get().join('');
 									// don't hide row if any filter has a value
 									if (all === ''){
@@ -764,7 +763,7 @@ ts.addWidget({
 						clearTimeout(st);
 						st = setTimeout(function(){
 							// don't hide row if any filter has a value
-							if ($t.find('.' + wo.filter_cssFilter).map(function(){ return $(this).val() || ''; }).get().join('') === ''){
+							if ($t.find('.tablesorter-filter').map(function(){ return $(this).val() || ''; }).get().join('') === ''){
 								ft2[ e.type === 'focus' ? 'removeClass' : 'addClass']('hideme');
 							}
 						}, 200);
@@ -774,7 +773,7 @@ ts.addWidget({
 			// show processing icon
 			if (c.showProcessing) {
 				$t.bind('filterStart.tsfilter filterEnd.tsfilter', function(e, v) {
-					var fc = (v) ? $t.find('.' + c.cssHeader).filter('[data-column]').filter(function(){
+					var fc = (v) ? $t.find('.' + ts.css.header).filter('[data-column]').filter(function(){
 						return v[$(this).data('column')] !== '';
 					}) : '';
 					ts.isProcessing($t[0], e.type === 'filterStart', v ? fc : '');
@@ -817,14 +816,14 @@ ts.addWidget({
 ts.getFilters = function(table) {
 	var c = table ? $(table)[0].config : {};
 	if (c && c.widgetOptions && !c.widgetOptions.filter_columnFilters) { return $(table).data('lastSearch'); }
-	return c && c.$filters ? c.$filters.find('.' + c.widgetOptions.filter_cssFilter).map(function(i, el) {
+	return c && c.$filters ? c.$filters.find('.tablesorter-filter').map(function(i, el) {
 		return $(el).val();
 	}).get() || [] : false;
 };
 ts.setFilters = function(table, filter, apply) {
 	var $t = $(table),
 		c = $t.length ? $t[0].config : {},
-		valid = c && c.$filters ? c.$filters.find('.' + c.widgetOptions.filter_cssFilter).each(function(i, el) {
+		valid = c && c.$filters ? c.$filters.find('.tablesorter-filter').each(function(i, el) {
 			$(el).val(filter[i] || '');
 		}).trigger('change.tsfilter') || false : false;
 	if (apply) { $t.trigger('search', [filter, false]); }
@@ -840,7 +839,7 @@ ts.addWidget({
 	id: "stickyHeaders",
 	priority: 60,
 	options: {
-		stickyHeaders : 'tablesorter-stickyHeader',
+		stickyHeaders : '',       // extra class name added to the sticky header row
 		stickyHeaders_offset : 0, // number or jquery selector targeting the position:fixed element
 		stickyHeaders_cloneId : '-sticky', // added to table ID, if it exists
 		stickyHeaders_addResizeEvent : true, // trigger "resize" event on headers
@@ -855,7 +854,7 @@ ts.addWidget({
 			hdrCells = header.children('tr:not(.sticky-false)').children(),
 			innr = '.tablesorter-header-inner',
 			tfoot = $t.find('tfoot'),
-			filterInputs = '.' + (wo.filter_cssFilter || 'tablesorter-filter'),
+			filterInputs = '.tablesorter-filter',
 			$stickyOffset = isNaN(wo.stickyHeaders_offset) ? $(wo.stickyHeaders_offset) : '',
 			stickyOffset = $stickyOffset.length ? $stickyOffset.height() || 0 : parseInt(wo.stickyHeaders_offset, 10) || 0,
 			stickyzIndex = wo.stickyHeaders_zIndex ? wo.stickyHeaders_zIndex : 2,
@@ -868,7 +867,7 @@ ts.addWidget({
 					visibility : 'hidden',
 					zIndex     : stickyzIndex
 				}),
-			stkyHdr = $stickyTable.children('thead:first').addClass(wo.stickyHeaders),
+			stkyHdr = $stickyTable.children('thead:first').addClass('tablesorter-stickyHeader ' + wo.stickyHeaders),
 			stkyCells,
 			laststate = '',
 			spacing = 0,
@@ -920,11 +919,11 @@ ts.addWidget({
 				t
 					.attr('class', $(this).attr('class'))
 					// remove processing icon
-					.removeClass(c.cssProcessing);
+					.removeClass(ts.css.processing + ' ' + c.cssProcessing);
 				if (c.cssIcon){
 					t
-					.find('.' + c.cssIcon)
-					.attr('class', $(this).find('.' + c.cssIcon).attr('class'));
+					.find('.' + ts.css.icon)
+					.attr('class', $(this).find('.' + ts.css.icon).attr('class'));
 				}
 			});
 		})
@@ -1004,7 +1003,7 @@ ts.addWidget({
 		c.$table
 			.removeClass('hasStickyHeaders')
 			.unbind('sortEnd.tsSticky pagerComplete.tsSticky')
-			.find('.' + wo.stickyHeaders).remove();
+			.find('.tablesorter-stickyHeader').remove();
 		if (wo.$sticky && wo.$sticky.length) { wo.$sticky.remove(); } // remove cloned table
 		// don't unbind if any table on the page still has stickyheaders applied
 		if (!$('.hasStickyHeaders').length) {
diff --git a/js/widgets/widget-grouping.js b/js/widgets/widget-grouping.js
index 7649e9c4..e9a8e1ab 100644
--- a/js/widgets/widget-grouping.js
+++ b/js/widgets/widget-grouping.js
@@ -12,7 +12,7 @@ ts.grouping = {
 	number : function(c, $col, txt, num, group){
 		var t, w;
 		if (num > 1 && txt !== '') {
-			if ($col.hasClass(c.cssAsc)) {
+			if ($col.hasClass(ts.css.sortAsc)) {
 				t = Math.floor(parseFloat(txt)/num) * num;
 				return t > parseFloat(group || 0) ? t : parseFloat(group || 0);
 			} else {
@@ -104,7 +104,7 @@ ts.addWidget({
 							group = curr;
 							// show range if number > 1
 							if (t2[1] === 'number' && t2[2] > 1 && curr !== '') {
-								curr += ' - ' + (parseInt(curr, 10) + ((parseInt(t2[2],10) - 1) * (c.$headers.eq(col).hasClass(c.cssAsc) ? 1 : -1)));
+								curr += ' - ' + (parseInt(curr, 10) + ((parseInt(t2[2],10) - 1) * (c.$headers.eq(col).hasClass(ts.css.sortAsc) ? 1 : -1)));
 							}
 							if ($.isFunction(wo.group_formatter)) {
 								curr = wo.group_formatter((curr || '').toString(), col, table, c, wo) || curr;
diff --git a/js/widgets/widget-scroller.js b/js/widgets/widget-scroller.js
index 36023726..cc667266 100644
--- a/js/widgets/widget-scroller.js
+++ b/js/widgets/widget-scroller.js
@@ -39,8 +39,9 @@
 $.fn.hasScrollBar = function(){
 	return this.get(0).scrollHeight > this.height();
 };
+var ts = $.tablesorter;
 
-$.tablesorter.window_resize = function(){
+ts.window_resize = function(){
 	if (this.resize_timer) {
 		clearTimeout(this.resize_timer); 
 	}
@@ -61,7 +62,7 @@ $(function(){
 	$(s).appendTo('body');
 });
 
-$.tablesorter.addWidget({
+ts.addWidget({
 	id: 'scroller',
 	priority: 60, // run after the filter widget
 	options: {
@@ -74,16 +75,16 @@ $.tablesorter.addWidget({
 		var $win = $(window);
 		//Setup window.resizeEnd event
 		$win
-			.bind('resize', $.tablesorter.window_resize)
+			.bind('resize', ts.window_resize)
 			.bind('resizeEnd', function(e) {
 				// init is run before format, so scroller_resizeWidth
 				// won't be defined within the "c" or "wo" parameters
 				if (typeof table.config.widgetOptions.scroller_resizeWidth === 'function') {
 					//IE calls resize when you modify content, so we have to unbind the resize event
 					//so we don't end up with an infinite loop. we can rebind after we're done.
-					$win.unbind('resize', $.tablesorter.window_resize);
+					$win.unbind('resize', ts.window_resize);
 					table.config.widgetOptions.scroller_resizeWidth();
-					$win.bind('resize', $.tablesorter.window_resize);
+					$win.bind('resize', ts.window_resize);
 				}
 			});
 	},
@@ -108,7 +109,7 @@ $.tablesorter.addWidget({
 
 			$cells = $hdr
 				.wrap('
')
-				.find('.' + c.cssHeader)
+				.find('.' + ts.css.header)
 				.bind('mousedown', function(){
 					this.onselectstart = function(){ return false; };
 					return false;
@@ -123,17 +124,17 @@ $.tablesorter.addWidget({
 						t
 							.attr('class', $(this).attr('class'))
 							// remove processing icon
-							.removeClass(c.cssProcessing);
-						if (c.cssIcon){
+							.removeClass(ts.css.processing + ' ' + c.cssProcessing);
+						if (ts.css.icon){
 							t
-								.find('.' + c.cssIcon)
-								.attr('class', $(this).find('.' + c.cssIcon).attr('class'));
+								.find('.' + ts.css.icon)
+								.attr('class', $(this).find('.' + ts.css.icon).attr('class'));
 						}
 					});
 				});
 
 			// make scroller header sortable
-			c.$headers.find('*')[ $.fn.addBack ? 'addBack': 'andSelf' ]().filter(c.selectorSort).each(function(i){
+			c.$headers.find(c.selectorSort).add( c.$headers.filter(c.selectorSort) ).each(function(i){
 				var t = $(this);
 				$cells.eq(i)
 				// clicking on new header will trigger a sort
diff --git a/test.html b/test.html
index 058e2f28..c793bad8 100644
--- a/test.html
+++ b/test.html
@@ -400,16 +400,16 @@
 		test( "testing header css & sortReset method", function(){
 			expect(7);
 			t = $(th0);
-			equal( $table1.hasClass(c1.tableClass), true, 'table class applied');
-			equal( t.hasClass(c1.cssHeader), true, 'Header class present' );
-			equal( t.parent().hasClass(c1.cssHeaderRow), true, 'Header row class present' );
+			equal( $table1.hasClass(ts.css.table), true, 'table class applied');
+			equal( t.hasClass(ts.css.header), true, 'Header class present' );
+			equal( t.parent().hasClass(ts.css.headerRow), true, 'Header row class present' );
 			equal( $table1.find('tbody:eq(1)').hasClass(c1.cssInfoBlock), true, 'Tbody info block class present' );
 			$table1.trigger('sorton', [[[ 0,1 ]]] );
-			equal( t.hasClass(c1.cssDesc), true, 'Descending class present' );
+			equal( t.hasClass(ts.css.sortDesc), true, 'Descending class present' );
 			$table1.trigger('sorton', [[[ 0,0 ]]] );
-			equal( t.hasClass(c1.cssAsc), true, 'Ascending class present' );
+			equal( t.hasClass(ts.css.sortAsc), true, 'Ascending class present' );
 			$table1.trigger('sortReset');
-			equal( t.hasClass(c1.cssAsc) || t.hasClass(c1.cssDesc), false, 'Testing sortReset' );
+			equal( t.hasClass(ts.css.sortAsc) || t.hasClass(ts.css.sortDesc), false, 'Testing sortReset' );
 		});
 
 		/************************************************