ColumnSelector: Add mediaqueryHidden option. Resolves #964

docs/example-widget-column-selector.html

@@ -83,6 +83,9 @@
 #popover-target input {
   margin-right: 5px;
 }
+#popover-target .disabled {
+	color: #ddd;
+}
 </style>
 
 <script id="js">$(function() {
@@ -114,6 +117,8 @@
 			columnSelector_mediaqueryName: 'Auto: ',
 			// breakpoints checkbox initial setting
 			columnSelector_mediaqueryState: true,
+			// hide columnSelector false columns while in auto mode
+			columnSelector_mediaqueryHidden: true,
 			// responsive table hides columns with priority 1-6 at these breakpoints
 			// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
 			// *** set to false to disable ***
@@ -170,6 +175,7 @@
 		<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.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>
@@ -339,6 +345,27 @@
 						</td>
 					</tr>
 
+					<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.
+							<div class="collapsible">
+							<br>
+							<ul>
+								<li>With this option set to <code>true</code>, the hidden state of a column can be set using any of the following methods, added to the header cell, in order of priority:
+									<ul>
+										<li>jQuery data <code>data-columnSelector="false"</code>.</li>
+										<li>metadata <code>class=&quot;{ columnSelector : false }&quot;</code> (requires the metadata plugin).</li>
+										<li>headers option <code>headers : { 0 : { columnSelector: 'false' } }</code>.</li>
+										<li>header class name <code>class=&quot;columnSelector-false&quot;</code>.</li>
+									</ul>
+								</li>
+							</ul>
+							<p>See <a href="https://github.com/Mottie/tablesorter/issues/964">issue #964</a> for more details.</p>
+							Default value: <code>false</code>
+							</div>
+						</td>
+					</tr>
+
 					<tr id="column-selector-breakpoints">
 						<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
 						<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.

js/widgets/widget-columnSelector.js

@@ -126,7 +126,8 @@
 					// 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'),
-					state = ts.getData(this, c.headers[colId], 'columnSelector');
+					col = ts.getColumnData( c.table, c.headers, colId ),
+					state = ts.getData(this, col, 'columnSelector');
 
 				// if this column not hidable at all
 				// include getData check (includes 'columnSelector-false' class, data attribute, etc)
@@ -227,9 +228,19 @@
 				c.$table.trigger(wo.columnSelector_updated);
 			}
 		},
-
+		addSelectors: function( prefix, column ) {
+			var array = [],
+				temp = ' col:nth-child(' + column + ')';
+			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
+			temp = ' tr th:nth-child(' + column + ')';
+			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
+			temp = ' tr td:nth-child(' + column + ')';
+			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
+			return array;
+		},
 		updateBreakpoints: function(c, wo) {
-			var priority, column, breaks, temp,
+			var priority, col, column, breaks,
+				isHidden = [],
 				colSel = c.selector,
 				prefix = c.namespace + 'columnselector',
 				mediaAll = [],
@@ -239,19 +250,27 @@
 				colSel.$style.prop('disabled', false);
 				return;
 			}
-
+			if (wo.columnSelector_mediaqueryHidden) {
+				// add columns to be hidden; even when "auto" is set - see #964
+				for ( column = 0; column < c.columns; column++ ) {
+					col = ts.getColumnData( c.table, c.headers, column );
+					isHidden[ column + 1 ] = ts.getData( c.$headerIndexed[ column ], col, 'columnSelector' ) === 'false';
+					if ( isHidden[ column + 1 ] ) {
+						// hide columnSelector false column (in auto mode)
+						mediaAll = mediaAll.concat( tsColSel.addSelectors( prefix, column + 1 ) );
+					}
+				}
+			}
 			// only 6 breakpoints (same as jQuery Mobile)
 			for (priority = 0; priority < 6; priority++){
 				/*jshint loopfunc:true */
 				breaks = [];
 				c.$headers.filter('[' + wo.columnSelector_priority + '=' + (priority + 1) + ']').each(function(){
 					column = parseInt($(this).attr('data-column'), 10) + 1;
-					temp = ' col:nth-child(' + column + ')';
+					// don't reveal columnSelector false columns
-					breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
+					if ( !isHidden[ column ] ) {
-					temp = ' tr th:nth-child(' + column + ')';
+						breaks = breaks.concat( tsColSel.addSelectors( prefix, column ) );
-					breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
+					}
-					temp = ' tr td:nth-child(' + column + ')';
-					breaks.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
 				});
 				if (breaks.length) {
 					mediaAll = mediaAll.concat( breaks );
@@ -269,24 +288,18 @@
 					.html( tsColSel.queryAll.replace(/\[columns\]/g, mediaAll.join(',')) + breakpts );
 			}
 		},
-
 		updateCols: function(c, wo) {
 			if (wo.columnSelector_mediaquery && c.selector.auto || c.selector.isInitializing) {
 				return;
 			}
-			var column, temp,
+			var column,
 				colSel = c.selector,
 				styles = [],
 				prefix = c.namespace + 'columnselector';
 			colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
 				if (!this.checked) {
 					column = parseInt( $(this).attr('data-column'), 10 ) + 1;
-					temp = ' col:nth-child(' + column + ')';
+					styles = styles.concat( tsColSel.addSelectors( prefix, column ) );
-					styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
-					temp = ' tr th:nth-child(' + column + ')';
-					styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
-					temp = ' tr td:nth-child(' + column + ')';
-					styles.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
 				}
 				$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
 			});
@@ -360,6 +373,8 @@
 			columnSelector_mediaqueryName: 'Auto: ',
 			// breakpoints checkbox initial setting
 			columnSelector_mediaqueryState: true,
+			// hide columnSelector false columns while in auto mode
+			columnSelector_mediaqueryHidden: false,
 			// responsive table hides columns with priority 1-6 at these breakpoints
 			// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
 			// *** set to false to disable ***