• In New v2.17.0, a method to refresh the column selector was added.

  • This widget will only work in tablesorter version 2.8+ and jQuery version 1.7+.
  • This widget may not work properly if the table header includes rows with row or column spans.
  • The responsive part of this widget
    • Uses similar parameters as those used by jQuery mobile to set column priority.
    • 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.
    • Any named data-priority, other than the numbers 1 - 6, (e.g. "critical" or "persistent") will be treated as a column which will not be included in the column selector.
    • Note that this widget uses media queries, which will not work in IE8 and older browsers.
  • The selector code uses css selectors, for optimal speed, to hide/show columns. These selectors will not work in IE8 and older browsers.
  • The column button & popup is completely customizable, and in this demo it includes css that may not work properly in older versions of IE.

Demo

CSS only popup

(When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
Name
Major
Sex
English
Japanese
Calculus
Geometry
NameMajorSexEnglishJapaneseCalculusGeometry
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100

Bootstrap Popover

Rank
First Name
Last Name
Age
Total
Discount
Date
1Philip Aaron WongJohnson Sr Esq25$5.9522%Jun 26, 2004 7:22 AM
11AaronHibert12$2.995%Aug 21, 2009 12:21 PM
12Brandon ClarkHenry Jr51$42.2918%Oct 13, 2000 1:15 PM
111PeterParker28$9.9920%Jul 6, 2006 8:14 AM
21JohnHood33$19.9925%Dec 10, 2002 5:14 AM
013ClarkKent Sr.18$15.8944%Jan 12, 2003 11:14 AM
005BruceAlmighty Esq45$153.1944%Jan 18, 2021 9:12 AM
10AlexDumass13$5.294%Jan 8, 2012 5:11 PM
16JimFranco24$14.1914%Jan 14, 2004 11:23 AM
166Bruce LeeEvans22$13.1911%Jan 18, 2007 9:12 AM
100Brenda DexterMcMasters18$55.2015%Feb 12, 2010 7:23 PM
55DennisBronson65$123.0032%Jan 20, 2001 1:12 PM
9MarthadelFuego25$22.0917%Jun 11, 2011 10:55 AM

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 {
margin-top: -65px; /* adjust popover position */
}

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>
<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>

<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>

Javascript

$(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>',
// 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,
// 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'
}
});

/*** Bootstrap popover demo ***/
$('#popover')
.popover({
placement: 'right',
html: true, // required if content has HTML
content: '<div id="popover-target"></div>'
})
// bootstrap popover event triggered when the popover opens
.on('shown.bs.popover', function () {
// call this function to copy the column selection code into the popover
$.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
});

// initialize column selector using default settings
// note: no container is defined!
$(".bootstrap-popup").tablesorter({
theme: 'blue',
widgets: ['zebra', 'columnSelector', 'stickyHeaders']
});

});