ColumnSelector: Extra rows & colspans now supported in thead & tfoot. Fixes #501

docs/example-widget-column-selector.html

@@ -175,7 +175,12 @@
 		<h3><a href="#">Notes</a></h3>
 		<div>
 		<ul>
-			<li>In <span class="version">v2.23.6</span>, added <code>columnSelector_mediaqueryHidden</code> option.</li>
+			<li>In <span class="version">v2.23.6</span>,
+				<ul>
+					<li>This widget now supports extra rows and <code>colspan</code> cells in the header &amp; footer (not the body). The first demo has been updated to show this enhancement.</li>
+					<li>Added <code>columnSelector_mediaqueryHidden</code> option.</li>
+				</ul>
+			</li>
 			<li>In <span class="version">v2.23.2</span>, added <code>columnSelector_updated</code> option.</li>
 			<li>In <span class="version updated">v2.23.0</span>, updated methods to allow refreshing the content of the container &amp; enchanced ability to set both auto and columns modes.</li>
 			<li>In <span class="version updated">v2.19.0</span>, the <code>refreshColumnSelector</code> method has been updated to allow passing a parameter. Pass an array of zero-based column indexes of columns to show, or any non-array to enable auto mode (if available).</li>
@@ -185,7 +190,7 @@
 				<br>
 			</li>
 			<li>This widget will <strong>only work</strong> in tablesorter version 2.8+ and jQuery version 1.7+.</li>
-			<li>This widget may not work properly if the table contains rows with <code>rowspan</code> or <code>colspan</code> settings.</li>
+			<li>This widget may not work properly if the table body contains rows with <code>rowspan</code> or <code>colspan</code> settings.</li>
 			<li>The responsive part of this widget:
 				<ul>
 					<li>Uses similar parameters as those used by jQuery mobile to set <a href="http://view.jquerymobile.com/1.4.0/demos/table-column-toggle/">column priority</a>.</li>
@@ -347,7 +352,7 @@
 
 					<tr id="column-selector-mediaquery-hidden">
 						<td><a href="#" class="permalink">columnSelector_mediaqueryHidden</a></td>
-						<td>When this option is set to <code>true</code> columns with a "columnSelector-false" class will be hidden while media queries ("auto" mode) are active.
+						<td>When this option is set to <code>true</code> columns with a "columnSelector-false" class will be hidden while media queries ("auto" mode) are active (<span class="version">v2.23.6</span>).
 							<div class="collapsible">
 							<br>
 							<ul>
@@ -523,6 +528,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
 
 <table class="tablesorter custom-popup">
 	<thead>
+		<tr class="tablesorter-ignoreRow">
+			<th colspan="3">Student</th>
+			<th colspan="4">Courses</th>
+		</tr>
 		<tr>
 			<th data-priority="critical">Name</th>
 			<!-- Remove column from selection popup by including -->
@@ -538,6 +547,10 @@ $.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );<
 	</thead>
 	<tfoot>
 		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
+		<tr>
+			<th colspan="3">Student</th>
+			<th colspan="4">Courses</th>
+		</tr>
 	</tfoot>
 	<tbody>
 		<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>

docs/index.html

@@ -454,7 +454,7 @@
 
 		<li><span class="label label-info">Beta</span> <a href="example-widget-chart.html">Chart Widget</a> (<span class="version">v2.19.0</span>).</li>
 		<li><span class="results">&dagger;</span> <a href="example-widget-columns.html">Columns highlight widget</a> (v2.0.17)</li>
-		<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.23.2</span>).</li>
+		<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.23.6</span>).</li>
 		<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.23.0</span>).</li>
 		<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a>  - (jQuery UI widget for column reordering [<a href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.19.0</span>).</li>
 		<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.23.4</span>):

js/widgets/widget-columnSelector.js

@@ -35,6 +35,7 @@
 			colSel.$breakpoints = $('<style></style>').prop('disabled', true).appendTo('head');
 
 			colSel.isInitializing = true;
+			tsColSel.setUpColspan(c, wo);
 			tsColSel.setupSelector(c, wo);
 
 			if (wo.columnSelector_mediaquery) {
@@ -103,10 +104,11 @@
 				tsColSel.updateBreakpoints(c, wo);
 				tsColSel.updateCols(c, wo);
 			}
+			tsColSel.adjustColspans( c, wo );
 		},
 
 		setupSelector: function(c, wo) {
-			var name,
+			var index, name,
 				colSel = c.selector,
 				$container = colSel.$container,
 				useStorage = wo.columnSelector_saveColumns && ts.storage,
@@ -121,19 +123,19 @@
 			colSel.$wrapper = [];
 			colSel.$checkbox = [];
 			// populate the selector container
-			c.$table.children('thead').find('tr:first th', c.table).each(function() {
-				var $this = $(this),
+			for ( index = 0; index < c.columns; index++ ) {
+				var $header = c.$headerIndexed[ index ],
 					// if no data-priority is assigned, default to 1, but don't remove it from the selector list
-					priority = $this.attr(wo.columnSelector_priority) || 1,
-					colId = $this.attr('data-column'),
+					priority = $header.attr(wo.columnSelector_priority) || 1,
+					colId = $header.attr('data-column'),
 					col = ts.getColumnData( c.table, c.headers, colId ),
-					state = ts.getData(this, col, 'columnSelector');
+					state = ts.getData( $header, col, 'columnSelector');
 
 				// if this column not hidable at all
 				// include getData check (includes 'columnSelector-false' class, data attribute, etc)
 				if ( isNaN(priority) && priority.length > 0 || state === 'disable' ||
 					( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) {
-					return true; // goto next
+					continue; // goto next
 				}
 
 				// set default state; storage takes priority
@@ -143,7 +145,7 @@
 				colSel.$column[colId] = $(this);
 
 				// set default col title
-				name = $this.attr(wo.columnSelector_name) || $this.text();
+				name = $header.attr(wo.columnSelector_name) || $header.text();
 				if ($container.length) {
 					colSel.$wrapper[colId] = $(wo.columnSelector_layout.replace(/\{name\}/g, name)).appendTo($container);
 					colSel.$checkbox[colId] = colSel.$wrapper[colId]
@@ -153,15 +155,17 @@
 						.toggleClass( wo.columnSelector_cssChecked, colSel.states[colId] )
 						.prop('checked', colSel.states[colId])
 						.on('change', function(){
-							colSel.states[colId] = this.checked;
+							// ensure states is accurate
+							var colId = $(this).attr('data-column');
+							c.selector.states[colId] = this.checked;
 							tsColSel.updateCols(c, wo);
 						}).change();
 				}
-			});
+			}
 
 		},
 
-		setupBreakpoints: function(c, wo){
+		setupBreakpoints: function(c, wo) {
 			var colSel = c.selector;
 
 			// add responsive breakpoints
@@ -223,6 +227,7 @@
 			if (wo.columnSelector_saveColumns && ts.storage) {
 				ts.storage( c.$table[0], 'tablesorter-columnSelector-auto', { auto : colSel.auto } );
 			}
+			tsColSel.adjustColspans( c, wo );
 			// trigger columnUpdate if auto is true (it gets skipped in updateCols()
 			if (colSel.auto) {
 				c.$table.trigger(wo.columnSelector_updated);
@@ -312,9 +317,70 @@
 			if (wo.columnSelector_saveColumns && ts.storage) {
 				ts.storage( c.$table[0], 'tablesorter-columnSelector', colSel.states );
 			}
+			tsColSel.adjustColspans( c, wo );
 			c.$table.trigger(wo.columnSelector_updated);
 		},
 
+		setUpColspan: function(c, wo) {
+			var index, span, nspace,
+				hasSpans = false,
+				$cells = c.$table
+					.add( $(c.namespace + '_extra_table') )
+					.children('thead, tfoot')
+					.children('tr')
+					.children('th, td'),
+				len = $cells.length;
+			for ( index = 0; index < len; index++ ) {
+				span = $cells[ index ].colSpan;
+				if ( span > 1 ) {
+					hasSpans = true;
+					$cells.eq( index )
+						.addClass( c.namespace.slice( 1 ) + 'columnselectorHasSpan' )
+						.attr( 'data-col-span', span );
+				}
+			}
+			// only add resize end if using media queries
+			if ( hasSpans && wo.columnSelector_mediaquery ) {
+				nspace = c.namespace.slice( 1 ) + 'columnselector';
+				// Setup window.resizeEnd event
+				$( window )
+					.off( nspace )
+					.on( 'resize' + nspace, ts.window_resize )
+					.on( 'resizeEnd' + nspace, 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.off( 'resize' + nspace, ts.window_resize );
+						tsColSel.adjustColspans( c, wo );
+						$win.on( 'resize' + nspace, ts.window_resize );
+					});
+			}
+		},
+		adjustColspans: function(c, wo) {
+			var index, cols, col, span, end,
+				colSel = c.selector,
+				autoModeOn = colSel.auto,
+				$colspans = $( c.namespace + 'columnselectorHasSpan' ),
+				len = $colspans.length;
+			if ( len ) {
+				for ( index = 0; index < len; index++ ) {
+					col = parseInt( $colspans.eq(index).attr('data-column'), 10 );
+					span = parseInt( $colspans.eq(index).attr('data-col-span'), 10 );
+					end = col + span;
+					for ( cols = col; cols < end; cols++ ) {
+						if ( !autoModeOn && colSel.states[ cols ] === false ||
+							autoModeOn && c.$headerIndexed[ cols ] && !c.$headerIndexed[ cols ].is(':visible') ) {
+							span--;
+						}
+					}
+					if ( span ) {
+						$colspans.eq(index).show()[0].colSpan = span;
+					} else {
+						$colspans.eq(index).hide();
+					}
+				}
+			}
+		},
+
 		attachTo : function(table, elm) {
 			table = $(table)[0];
 			var colSel, wo, indx,
@@ -349,6 +415,16 @@
 
 	};
 
+	/* Add window resizeEnd event (also used by scroller widget) */
+	ts.window_resize = function() {
+		if ( ts.timer_resize ) {
+			clearTimeout( ts.timer_resize );
+		}
+		ts.timer_resize = setTimeout( function() {
+			$( window ).trigger( 'resizeEnd' );
+		}, 250 );
+	};
+
 	ts.addWidget({
 		id: 'columnSelector',
 		priority: 10,

js/widgets/widget-scroller.js

@@ -88,7 +88,7 @@
 		}
 	});
 
-	/* Add window resizeEnd event */
+	/* Add window resizeEnd event (also used by columnSelector widget) */
 	ts.window_resize = function() {
 		if ( ts.timer_resize ) {
 			clearTimeout( ts.timer_resize );