822 lines
41 KiB
HTML
822 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery tablesorter 2.0 - Column Selector Widget</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<script src="js/jquery-ui.min.js"></script>
|
|
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<script src="../js/widgets/widget-columnSelector.js"></script>
|
|
<style>
|
|
/* override document styling */
|
|
.popover.right { text-align: left; }
|
|
.ui-widget-content a { color: #428bca; }
|
|
</style>
|
|
|
|
<style id="css">/*** custom css only popup ***/
|
|
.columnSelectorWrapper {
|
|
position: relative;
|
|
margin: 10px 0;
|
|
display: inline-block;
|
|
}
|
|
.columnSelector, .hidden {
|
|
display: none;
|
|
}
|
|
.columnSelectorButton {
|
|
background: #99bfe6;
|
|
border: #888 1px solid;
|
|
color: #111;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
}
|
|
#colSelect1:checked + label {
|
|
background: #5797d7;
|
|
border-color: #555;
|
|
}
|
|
#colSelect1:checked ~ #columnSelector {
|
|
display: block;
|
|
}
|
|
.columnSelector {
|
|
width: 120px;
|
|
position: absolute;
|
|
top: 30px;
|
|
padding: 10px;
|
|
background: #fff;
|
|
border: #99bfe6 1px solid;
|
|
border-radius: 5px;
|
|
}
|
|
.columnSelector label {
|
|
display: block;
|
|
}
|
|
.columnSelector label:nth-child(1) {
|
|
border-bottom: #99bfe6 solid 1px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.columnSelector input {
|
|
margin-right: 5px;
|
|
}
|
|
.columnSelector .disabled {
|
|
color: #ddd;
|
|
}
|
|
|
|
/*** Bootstrap popover ***/
|
|
#popover-target label {
|
|
margin: 0 5px;
|
|
display: block;
|
|
}
|
|
#popover-target input {
|
|
margin-right: 5px;
|
|
}
|
|
#popover-target .disabled {
|
|
color: #ddd;
|
|
}
|
|
</style>
|
|
|
|
<script id="js">$(function() {
|
|
|
|
/*** custom css only button popup ***/
|
|
$(".custom-popup").tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
|
|
widgetOptions : {
|
|
// target the column selector markup
|
|
columnSelector_container : $('#columnSelector'),
|
|
// column status, true = display, false = hide
|
|
// disable = do not display on list
|
|
columnSelector_columns : {
|
|
0: 'disable' /* set to disabled; not allowed to unselect it */
|
|
},
|
|
// remember selected columns (requires $.tablesorter.storage)
|
|
columnSelector_saveColumns: true,
|
|
|
|
// 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',
|
|
|
|
/* Responsive Media Query settings */
|
|
// enable/disable mediaquery breakpoints
|
|
columnSelector_mediaquery: true,
|
|
// toggle checkbox name
|
|
columnSelector_mediaqueryName: 'Auto: ',
|
|
// breakpoints checkbox initial setting
|
|
columnSelector_mediaqueryState: true,
|
|
// hide columnSelector false columns while in auto mode
|
|
columnSelector_mediaqueryHidden: true,
|
|
|
|
// set the maximum and/or minimum number of visible columns; use null to disable
|
|
columnSelector_maxVisible: null,
|
|
columnSelector_minVisible: null,
|
|
// 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 ***
|
|
columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ],
|
|
// data attribute containing column priority
|
|
// duplicates how jQuery mobile uses priorities:
|
|
// http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/
|
|
columnSelector_priority : 'data-priority',
|
|
|
|
// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
|
|
// applied icons; use this class name (input.checked) instead of input:checked
|
|
columnSelector_cssChecked : 'checked',
|
|
|
|
// class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
|
|
columnSelector_classHasSpan : 'hasSpan',
|
|
|
|
// event triggered when columnSelector completes
|
|
columnSelector_updated : 'columnUpdate'
|
|
}
|
|
});
|
|
|
|
/*** Bootstrap popover demo ***/
|
|
|
|
// initialize column selector using default settings
|
|
// note: no container is defined!
|
|
$(".bootstrap-popup").tablesorter({
|
|
theme: 'blue',
|
|
widgets: ['zebra', 'columnSelector', 'stickyHeaders']
|
|
});
|
|
|
|
// call this function to copy the column selection code into the popover
|
|
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
|
|
|
|
$('#popover')
|
|
.popover({
|
|
placement: 'right',
|
|
html: true, // required if content has HTML
|
|
content: $('#popover-target')
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Column Selector Widget</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
|
|
<div id="main">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<div id="root" class="accordion">
|
|
|
|
<h3><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>In <span class="version">v2.29.0</span>, added a <code>columnSelector_classHasSpan</code> setting.</li>
|
|
<li>In <span class="version">v2.27.0</span>,
|
|
<ul>
|
|
<li>Added two new options: <code>columnSelector_maxVisible</code> and <code>columnSelector_minVisible</code>.</li>
|
|
<li>These settings set a maximum and/or minimum number of visible columns. <strong>Please see the option description for each setting for important details!</strong></li>
|
|
<li>The <code>refreshColumnSelector</code> method is not constrained by these limitations. Only user interaction is restricted.</li>
|
|
</ul>
|
|
</li>
|
|
<li>In <span class="version">v2.25.9</span>,
|
|
<ul>
|
|
<li>Added a <code>columnSelector_maxPriorities</code> setting.</li>
|
|
<li>Using the "refreshColumnSelector" method now properly saves the settings if the <code>columnSelector_saveColumns</code> is <code>true</code>.</li>
|
|
<li>The widget still uses the <code>filter_filteredRow</code> setting, but now falls back to using "filtered" when it is undefined.</li>
|
|
</ul>
|
|
</li>
|
|
<li>In <span class="version">v2.24.0</span>,
|
|
<ul>
|
|
<li>This widget now supports extra rows and <code>colspan</code> cells in the header & 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 & 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>
|
|
<li>In <span class="version">v2.18.4</span>, added <code>columnSelector_cssChecked</code> option which contains the class name added to checked inputs. This helps fix an issue in Chrome that rears it's ugly head when trying to use <code>input:checked</code> to change a Font Awesome icon. See <a href="http://jsfiddle.net/2tu38gez">this demo</a> by TheSin which uses this option to change the checkbox style.</li>
|
|
<li>
|
|
In <span class="version">v2.17.0</span>, a method to refresh the column selector was added.<br>
|
|
<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 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>
|
|
<li>The column priorities range from 1 to 6, with 1 having the highest priority. As the browser window shrinks, lower priority (higher numbers) columns will be hidden first until all numbered priority columns are hidden.</li>
|
|
<li>Any named data-priority, other than the numbers 1 - 6, (e.g. "critical" or "persistent") will be treated as a column which <em>will not be included</em> in the column selector.</li>
|
|
<li>Note that this widget uses media queries, which <a href="http://caniuse.com/#search=media">will not work in IE8 and older browsers</a>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>The selector code uses css selectors, for optimal speed, to hide/show columns. These selectors <a href="http://caniuse.com/#search=nth-child">will not work in IE8 and older browsers</a>.</li>
|
|
<li>The column button & popup is completely customizable, and in this demo it includes css that may not work properly in older versions of IE.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3><a href="#">Options</a></h3>
|
|
<div>
|
|
<h4>Column selector widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
|
|
<div>
|
|
<span class="label label-info">TIP!</span> Click on the link in the "Option" column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
|
|
</div>
|
|
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
|
|
<thead>
|
|
<tr><th width="5%">Option</th><th class="sorter-false">Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="column-selector-container">
|
|
<td><a href="#" class="permalink">columnSelector_container</a></td>
|
|
<td>
|
|
Target an element within the current page where the column selector will be inserted.
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>This setting is optional. If not set, you can use the following function to attach it to another element - see the Bootstrap example below
|
|
<pre class="prettyprint lang-js">$.tablesorter.columnSelector.attachTo( $('table'), '.selector-target' );</pre>
|
|
</li>
|
|
<li>This can be either a jQuery selector string ( e.g. <code>'#columnSelector'</code> )</li>
|
|
<li>or, a jQuery object ( e.g. <code>$('#columnSelector')</code> ).</li>
|
|
</ul>
|
|
Default value: <code>null</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-columns">
|
|
<td><a href="#" class="permalink">columnSelector_columns</a></td>
|
|
<td>
|
|
Assigns a column status for each selector
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>To disable, or remove a column from the column selector, include the key word <code>"disable"</code> - this is one of many ways to remove a column from the column selector popup</li>
|
|
<li>Set a column status to <code>true</code> to initially display a column. This is the default for undefined columns.</li>
|
|
<li>Set a column status to <code>false</code> to initially hide a column.</li>
|
|
<li>Examples:
|
|
<pre class="prettyprint lang-js">widgetOptions : {
|
|
columnSelector_columns : {
|
|
0 : "disable", /* disable; i.e. remove column from selector */
|
|
1 : false, /* start with column hidden */
|
|
2 : true, /* start with column visible; default for undefined columns */
|
|
}
|
|
}</pre></li>
|
|
<li>
|
|
<span class="label label-warning">*NOTE*</span> Prior to v2.15.6, using these extra methods and setting a column to "false" would remove it from the selector. Now, it is more consistent with this columns option - set the appropriate method to "disable" to remove a column, "false" to initially hide a column and "true" to keep the column in an initially visible state.<br>
|
|
<br>
|
|
In <span class="version">v2.15.6</span>, the following methods in order of priority are now available (set to true, false or disable):
|
|
<ul>
|
|
<li>jQuery data <code>data-columnSelector="true"</code> or <code>data-columnSelector="false"</code>.</li>
|
|
<li>metadata <code>class="{ columnSelector : true }"</code> or <code>class="{ columnSelector : false }"</code>.</li>
|
|
<li>headers option <code>headers : { 0 : { columnSelector: true } }</code> or <code>headers : { 0 : { columnSelector: false } }</code>.</li>
|
|
<li>header class name <code>class="columnSelector-true"</code> or <code>class="columnSelector-false"</code>.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p><span class="label label-warning">*NOTE*</span> Setting a column to initially be visible (<code>true</code>) or invisible (<code>false</code>) will be overridden by the users saved selections if the <code>columnSelector_saveColumns</code> option is <code>true</code>.</p>
|
|
<p><span class="label label-info">NOTE</span> If only using this widget to hide columns, set the <code>columnSelector_mediaquery</code> option to <code>false</code>. Otherwise, you'll also need to set a <code>data-priority</code> in each column header.</p>
|
|
Default value: <code>{}</code>; empty object
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-save-columns">
|
|
<td><a href="#" class="permalink">columnSelector_saveColumns</a></td>
|
|
<td>Save the current manually set column status and the table's responsive ("auto") state (<span class="version updated">v2.15.7</span>).
|
|
<div class="collapsible">
|
|
<br>
|
|
This option requires the storage utility contained within the tablesorter widgets file (<code>jquery.tablesorter.widgets.js</code>).<br>
|
|
<br>
|
|
Default value: <code>true</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-layout">
|
|
<td><a href="#" class="permalink">columnSelector_layout</a></td>
|
|
<td>
|
|
This option defines the markup used for each column selector within the popup.
|
|
<div class="collapsible">
|
|
<br>
|
|
The only available parameter is the <code>{name}</code> string which will be replaced with the appropriate column name/title.<br>
|
|
<br>
|
|
An <code><input type="checkbox"></code> is required within this setting! The label element is optional.<br>
|
|
<br>
|
|
Default value: <code>'<label><input type="checkbox">{name}</label>'</code>
|
|
</div>
|
|
</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>
|
|
The data-attribute within the table header cell which contains an alternate column selector name.
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>If the header cell does not have this attribute defined, the column selector name will be taken from the header cell internal text.</li>
|
|
<li>If defined, the text contained within this attribute will replace the <code>{name}</code> string within the layout option above.</li>
|
|
</ul>
|
|
Default value: <code>'data-selector-name'</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-mediaquery">
|
|
<td><a href="#" class="permalink">columnSelector_mediaquery</a></td>
|
|
<td>Set this option to add (<code>true</code>) or not add (<code>false</code>) the media query functionality of this widget.
|
|
<div class="collapsible">
|
|
<br>
|
|
When <code>true</code>, an "auto" checkbox is included along with the column checkboxes:
|
|
<ul>
|
|
<li>When the "auto" checkbox is checked, all column checkboxes are disabled and media queries are active (columns will hide or show based on the browser width).</li>
|
|
<li>If "auto" is unchecked, media queries are disabled and column (non-critial/not disabled) visibility is based on the column checkbox setting.</li>
|
|
</ul>
|
|
<span class="label label-info">Note</span> When set to <code>true</code>, this option <em>requires</em> the <code>data-priority</code> attributes (name set by the <code>columnSelector_priority</code> option) be set in each header column
|
|
<pre class="prettyprint lang-html"><th data-priority="critical">Rank</th></pre>
|
|
See <code>columnSelector_priority</code> for more details.
|
|
<p>Default value: <code>true</code></p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-mediaquery-name">
|
|
<td><a href="#" class="permalink">columnSelector_mediaqueryName</a></td>
|
|
<td>When the media query checkbox is added (it also uses the <code>columnSelector_layout</code> markup), this is the name that is added.
|
|
<div class="collapsible">
|
|
<br>
|
|
Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.<br>
|
|
<br>
|
|
Default value: <code>'Auto: '</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-mediaquery-state">
|
|
<td><a href="#" class="permalink">columnSelector_mediaqueryState</a></td>
|
|
<td>Set this option to <code>false</code> to start with the media query disabled (manual column selection mode).
|
|
<div class="collapsible">
|
|
<br>
|
|
Default value: <code>true</code>
|
|
</div>
|
|
</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 (<span class="version">v2.24.0</span>).
|
|
<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="{ columnSelector : false }"</code> (requires the metadata plugin).</li>
|
|
<li>headers option <code>headers : { 0 : { columnSelector: 'false' } }</code>.</li>
|
|
<li>header class name <code>class="columnSelector-false"</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-max-visible">
|
|
<td><a href="#" class="permalink">columnSelector_maxVisible</a></td>
|
|
<td>Set this option to a number to set a maximum number of visible columns (<span class="version">v2.27.0</span>).
|
|
<div class="collapsible">
|
|
<br>
|
|
<span class="label label-info">Note</span>
|
|
<ul>
|
|
<li>The initial state is not limited by this option. If you have a maximum number set and no columns hidden by class (<code>columnSelector-false</code> or by <code>columnSelector_columns</code> option, then all columns will be visible!</li>
|
|
<li>The setting <em>does not</em> take into account the disabled columns (columns not listed in the column selector).</li>
|
|
<li>So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).</li>
|
|
<li>If this option was set to <code>2</code>, only two additional columns, not counting the "Name" and "Major" columns can be made visible.</li>
|
|
</ul>
|
|
<p>Set this value to <code>null</code> to disable it.</p>
|
|
Default value: <code>null</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="column-selector-min-visible">
|
|
<td><a href="#" class="permalink">columnSelector_minVisible</a></td>
|
|
<td>Set this option to a number to set a minimum number of visible columns (<span class="version">v2.27.0</span>).
|
|
<div class="collapsible">
|
|
<br>
|
|
<span class="label label-info">Note</span>
|
|
<ul>
|
|
<li>The initial state is not limited by this option. If you have all columns hidden initially, then all columns will be hidden!</li>
|
|
<li>The setting <em>does not</em> take into account the disabled columns (columns not listed in the column selector).</li>
|
|
<li>So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).</li>
|
|
<li>If this option was set to <code>1</code>, then one of the columns, not including the "Name" & "Major" columns, must always be visible.</li>
|
|
</ul>
|
|
<p>Set this value to <code>null</code> to disable it.</p>
|
|
Default value: <code>null</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.
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>For example,
|
|
<ul>
|
|
<li>The last entry "70em" (1,120px) is assigned to data-priority 6.</li>
|
|
<li>When the browser width is below this dimension, all columns with a data-priority of six will be hidden.</li>
|
|
<li>Then when a browser width less than "60em" (960px) is reached, all columns of data-priority 5 and above will be hidden.</li>
|
|
<li>At "50em" (800px), all columns of data-priority 4 and above are hidden, etc.</li>
|
|
</ul>
|
|
<br>
|
|
</li>
|
|
<li>Adjust these values as desired, but a <em>maximum</em> number data-priorities is set by the <code>columnSelector_maxPriorities</code> value (<span class="version updated">v2.25.9</span>).</li>
|
|
</ul>
|
|
Default value: <code>[ "20em", "30em", "40em", "50em", "60em", "70em" ]</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="column-selector-maxpriority">
|
|
<td><a href="#" class="permalink">columnSelector_maxPriorities</a></td>
|
|
<td>This option sets the maximum number of priorities (<span class="version">v2.25.9</span>).
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>If for some reason you need to change the number of priorities (especially increase the number), then change this setting to reflect the maximum number of available priorities.</li>
|
|
<li>Then make sure to modify the <code>columnSelector_breakpoints</code> to match this new value.</li>
|
|
</ul>
|
|
Default value: <code>6</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr id="column-selector-priority">
|
|
<td><a href="#" class="permalink">columnSelector_priority</a></td>
|
|
<td>
|
|
This is the assigned data-attribute which contains the defined data priority for a table column
|
|
<div class="collapsible">
|
|
<br>
|
|
<ul>
|
|
<li>Values of 1 through 6 set the breakpoints of that particular column.</li>
|
|
<li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below "20em" (320px).</li>
|
|
<li>A value of 7 has the lowest priority, meaning it is the first column(s) to be hidden when the browser width goes below "70em" (1,120px).</li>
|
|
<li>Any named priority value, (e.g. "critical" or "persistent") will flag the widget to remove that column from the selector list.</li>
|
|
<li>Undefined priorities will default to a priority value of 1.</li>
|
|
</ul>
|
|
Default value: <code>'data-priority'</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-css-checked">
|
|
<td><a href="#" class="permalink">columnSelector_cssChecked</a></td>
|
|
<td>
|
|
This class name is added to the input checkbox when it is checked
|
|
<div class="collapsible">
|
|
<br>
|
|
This was added because we found an issue in the latest version of Chrome where the css selector <code>input:checked</code> was not correctly modifying the displayed Font Awesome replacement icon when the checkbox was toggled.<br>
|
|
<br>
|
|
Use <code>input.checked</code> (or whatever value setting this class name option contains to get around this issue). See <a href="http://jsfiddle.net/2tu38gez">this demo</a> by TheSin which uses this option to change the checkbox style.<br>
|
|
<br>
|
|
Default value: <code>'checked'</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-class-has-span">
|
|
<td><a href="#" class="permalink">columnSelector_classHasSpan</a></td>
|
|
<td>
|
|
Class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody) (<span class="version">v2.29.0</span>)
|
|
<div class="collapsible">
|
|
<p>This was added to allow customizing the css name in case of conflicts.</p>
|
|
<p>The grouping widget accesses this value to ensure that group rows are not hidden when the first column is toggled.</p>
|
|
Default value: <code>'hasSpan'</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column-selector-updated">
|
|
<td><a href="#" class="permalink">columnSelector_updated</a></td>
|
|
<td>
|
|
This event is triggered after the columnSelector has completed updating (<span class="version">v2.23.2</span>)
|
|
<div class="collapsible">
|
|
<br>
|
|
<p>Bind to this event if you to need to perform an action after the columnSelector has finished hiding or showing columns.</p>
|
|
Use it as follows<pre class="prettyprint lang-js">$('table').on('columnUpdate', function() {
|
|
// set ascending sort on first column
|
|
$(this).trigger('sorton', [ [[0,0]] ]);
|
|
});</pre>
|
|
Default value: <code>'columnUpdate'</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<h3><a href="#">Methods</a></h3>
|
|
<div>
|
|
Refresh the breakpoints and selected columns using this method (<span class="version">v2.17.0</span>):
|
|
<p></p>
|
|
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector');</pre>
|
|
<p>In <span class="version updated">v2.23.0</span>, this method was expanded to allow the refreshing of the selector content & set auto and column modes.</p>
|
|
<ul>
|
|
<li>Here are a few examples:
|
|
<table class="tablesorter-blue">
|
|
<thead>
|
|
<th>Method</th>
|
|
<th>Description</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector');</code></td><td>Refresh current settings; mainly used to update the css used to hide/show columns</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ [2,3,4] ]);</code></td><td>Set visible columns; turn <em>off</em> "auto" mode (original method).</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'columns', [5,6] ]);</code></td><td>Set visible columns; turn <em>off</em> "auto" mode (alternative method).</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', true);</code></td><td>Turn <em>on</em> "auto" mode (original method).</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'auto', true ]);</code></td><td>Turn <em>on</em> "auto" mode (alternate method).</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'auto', false ]);</code></td><td>Turn <em>off</em> "auto" mode (alternate method).</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'auto', [2,3,4] ]);</code></td><td>Turn <em>on</em> "auto" mode & set visible columns when "auto" is off.</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', 'selectors');</code></td><td>Refresh selector popup contents & maintain "auto" mode; this allows updating column priorities, column names & widget options.</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'selectors', [5,6] ]);</code></td><td>Refresh selector popup contents; Set visible columns & turn <em>off</em> "auto" mode.</td></tr>
|
|
<tr><td><code class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ 'selectors', true ]);</code></td><td>Refresh selector popup contents; Turn <em>on</em> "auto" mode</td></tr>
|
|
</tbody>
|
|
</table>
|
|
The function used for this method was also split out from the event handler, so if you want you can access it directly as follows:
|
|
<pre class="prettyprint lang-js">var config = $('table')[0].config;
|
|
// example: refreshColumns( config, 'selectors', [5,6] );
|
|
$.tablesorter.columnSelector.refreshColumns( config, optionName, optionState );</pre>
|
|
</li>
|
|
</ul>
|
|
|
|
In <span class="version">v2.19.0</span>, this method will now accept a parameter.
|
|
<p></p>
|
|
<ul>
|
|
<li>
|
|
The parameter can be either an array of zero-based column indexes to toggle columns on and off:
|
|
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', [ [2,3,4] ]);</pre>
|
|
<span class="label label-info">Note</span>
|
|
<ul>
|
|
<li>Passing an array will turn "auto" mode off.</li>
|
|
<li>Make sure to wrap the array inside another array.</li>
|
|
<li>Columns marked as "critical" or "disable" will never get toggled off using this method.</li>
|
|
</ul>
|
|
<p></p>
|
|
</li>
|
|
<li>
|
|
Or, set the parameter to any non-array value to turn the "auto" mode on - this only works if the <code>columnSelector_mediaquery</code> is set to <code>true</code>:
|
|
<pre class="prettyprint lang-js">$('table').trigger('refreshColumnSelector', true);</pre>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3><a href="#">Removing a column from the selector</a></h3>
|
|
<div>
|
|
This is probably overkill, but there are numerous ways to remove a column from the selection popup (<span class="version updated">v2.15.6</span>):
|
|
<ul>
|
|
<li>Setting the <code>data-priority</code> to any non-numerical name (e.g. "critical" or "persistent").</li>
|
|
<li>Setting the column selector widget columns option <code>columnSelector_columns : { 0 : 'disable' }</code>.</li>
|
|
<li>The following methods, added to the header cell, in order of priority:
|
|
<ul>
|
|
<li>jQuery data <code>data-columnSelector="disable"</code>.</li>
|
|
<li>metadata <code>class="{ columnSelector : disable }"</code> (requires the metadata plugin).</li>
|
|
<li>headers option <code>headers : { 0 : { columnSelector: 'disable' } }</code>.</li>
|
|
<li>header class name <code>class="columnSelector-disable"</code>.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
* <span class="label label-warning">*NOTE*</span> Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting.
|
|
</div>
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<h3>CSS only popup</h3>
|
|
<!-- This selector markup is completely customizable -->
|
|
<div class="columnSelectorWrapper">
|
|
<input id="colSelect1" type="checkbox" class="hidden">
|
|
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
|
<div id="columnSelector" class="columnSelector">
|
|
<!-- this div is where the column selector is added -->
|
|
</div>
|
|
</div> (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
|
|
|
|
<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 -->
|
|
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
|
<th class="columnSelector-disable">Major</th>
|
|
<!-- columnSelector-false will initially hide the column; see columnSelector_mediaqueryHidden option -->
|
|
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
|
<th data-priority="4">English</th>
|
|
<th data-priority="5">Japanese</th>
|
|
<th data-priority="3">Calculus</th>
|
|
<th data-priority="2">Geometry</th>
|
|
</tr>
|
|
</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>
|
|
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
|
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
|
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
|
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
|
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
|
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
|
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
|
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
|
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
|
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
|
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
|
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
|
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
|
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
|
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
|
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
|
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
|
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
|
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Bootstrap Popover</h3>
|
|
<!-- Bootstrap popover button -->
|
|
<button id="popover" type="button" class="btn btn-default">
|
|
Select Column
|
|
</button>
|
|
|
|
<div class="hidden">
|
|
<div id="popover-target"></div>
|
|
</div>
|
|
|
|
<table class="tablesorter bootstrap-popup">
|
|
<thead>
|
|
<tr>
|
|
<th data-priority="critical">Rank</th>
|
|
<th data-priority="3">First Name</th>
|
|
<th data-priority="critical">Last Name</th>
|
|
<th data-priority="4">Age</th>
|
|
<th data-priority="4">Total</th>
|
|
<th data-priority="5">Discount</th>
|
|
<th data-priority="6">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>Philip Aaron Wong</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
|
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
|
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
|
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
|
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
|
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
|
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
|
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
|
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
|
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
|
<tr><td>100</td><td>Brenda Dexter</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
|
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
|
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h1>Css</h1>
|
|
<div id="css">
|
|
<pre class="prettyprint lang-css"></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><h3>CSS only popup</h3>
|
|
<!-- This selector markup is completely customizable -->
|
|
<div class="columnSelectorWrapper">
|
|
<input id="colSelect1" type="checkbox" class="hidden">
|
|
<label class="columnSelectorButton" for="colSelect1">Column</label>
|
|
<div id="columnSelector" class="columnSelector">
|
|
<!-- this div is where the column selector is added -->
|
|
</div>
|
|
</div>
|
|
|
|
<table class="tablesorter custom-popup">
|
|
<thead>
|
|
<tr class="tablesorter-ignoreRow"> <!-- Ignore all cell content; disable sorting & form interaction -->
|
|
<th data-priority="critical">Name</th>
|
|
<!-- Remove column from selection popup by including -->
|
|
<!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
|
|
<th class="columnSelector-disable">Major</th>
|
|
<!-- columnSelector-false will initially hide the column -->
|
|
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
|
|
<th data-priority="4">English</th>
|
|
<th data-priority="5">Japanese</th>
|
|
<th data-priority="3">Calculus</th>
|
|
<th data-priority="2">Geometry</th>
|
|
</tr>
|
|
</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>
|
|
</tfoot>
|
|
<tbody>
|
|
<!-- ... -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Bootstrap Popover</h3>
|
|
<!-- Bootstrap popover button -->
|
|
<button id="popover" type="button" class="btn btn-default">
|
|
Select Column
|
|
</button>
|
|
|
|
<div class="hidden">
|
|
<div id="popover-target"></div>
|
|
</div>
|
|
|
|
<table class="tablesorter bootstrap-popup">
|
|
<thead>
|
|
<tr>
|
|
<th data-priority="critical">Rank</th>
|
|
<th data-priority="3">First Name</th>
|
|
<th data-priority="critical">Last Name</th>
|
|
<th data-priority="4">Age</th>
|
|
<th data-priority="4">Total</th>
|
|
<th data-priority="5">Discount</th>
|
|
<th data-priority="6">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- ... -->
|
|
</tbody>
|
|
</table></pre>
|
|
</div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-js"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|