ColumnSelector: revert b9e89d4, add layoutCustomizer option. See #1335

docs/example-widget-column-selector.html

@@ -107,6 +107,9 @@
 
 			// container layout
 			columnSelector_layout : '<label><input type="checkbox">{name}</label>',
+			// layout customizer callback called for each column
+			// function($cell, name, column){ return name || $cell.html(); }
+			columnSelector_layoutCustomizer : null,
 			// data attribute containing column name to use in the selector container
 			columnSelector_name  : 'data-selector-name',
 
@@ -316,6 +319,35 @@
 						</td>
 					</tr>
 
+					<tr id="column-selector-layout-customizer">
+						<td><a href="#" class="permalink">columnSelector_layoutCustomizer</a></td>
+						<td>
+							This option is set as a callback function that is called during the processing of the layout for each column.
+							<div class="collapsible">
+							<br>
+							<p>This callback contains three parameters:</p>
+							<ul>
+								<li><code>$cell</code> - jQuery object pointing to the header cell inner wrapper. If the <a href="index.html#headertemplate"><code>headerTemplate</code></a> option is set as an empty string, then the inner wrapper is not included, and the <code>$cell</code> would then point to the table cell (<code>th</code> or <code>td</code> depending on the markup).</li>
+								<li><code>name</code> - This parameter contains the header cell title string. This value is obtained from the header cell <code>data-selector-name</code> attribute, if defined, or the header cell text.</li>
+								<li><code>index</code> - The current column index as a number value.</li>
+							</ul>
+							<pre class="prettyprint lang-js">$(function() {
+  $("#task").tablesorter({
+    widgets: ["columnSelector"],
+    widgetOptions: {
+      columnSelector_container: $('#columnSelector'),
+      columnSelector_layoutCustomizer: function($cell, name, index) {
+        // return the HTML for the first column only
+        return index === 0 ? $cell.html() : name;
+      }
+    }
+  });
+});</pre>
+							Default value: <code>null</code>
+							</div>
+						</td>
+					</tr>
+
 					<tr id="column-selector-name">
 						<td><a href="#" class="permalink">columnSelector_name</a></td>
 						<td>

js/widgets/widget-columnSelector.js

@@ -113,7 +113,7 @@
 		},
 
 		setupSelector: function(c, wo) {
-			var index, name, $header, priority, col, colId,
+			var index, name, $header, priority, col, colId, $el,
 				colSel = c.selector,
 				$container = colSel.$container,
 				useStorage = wo.columnSelector_saveColumns && ts.storage,
@@ -149,10 +149,13 @@
 					saved[colId] : (typeof wo.columnSelector_columns[colId] !== 'undefined' && wo.columnSelector_columns[colId] !== null) ?
 					wo.columnSelector_columns[colId] : (state === 'true' || state !== 'false');
 				colSel.$column[colId] = $(this);
-
-				// set default col title
-				name = $header.attr(wo.columnSelector_name) || $header.text().trim() || c.headerContent[ index ];
 				if ($container.length) {
+					// set default col title
+					name = $header.attr(wo.columnSelector_name) || $header.text().trim();
+					if (typeof wo.columnSelector_layoutCustomizer === "function") {
+						$el = $header.find('.' + ts.css.headerIn);
+						name = wo.columnSelector_layoutCustomizer( $el.length ? $el : $header, name, parseInt(colId, 10) );
+					}
 					colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
 					colSel.$checkbox[colId] = colSel.$wrapper[colId]
 						// input may not be wrapped within the layout template
@@ -497,6 +500,9 @@
 
 			// container layout
 			columnSelector_layout : '<label><input type="checkbox">{name}</label>',
+			// layout customizer callback called for each column
+			// function($cell, name, column){ return name || $cell.html(); }
+			columnSelector_layoutCustomizer : null,
 			// data attribute containing column name to use in the selector container
 			columnSelector_name : 'data-selector-name',