Demo
CSS only popup
Name |
Major |
Sex |
English |
Japanese |
Calculus |
Geometry |
---|---|---|---|---|---|---|
Name | Major | Sex | English | Japanese | Calculus | Geometry |
Student03 | Languages | female | 85 | 95 | 80 | 85 |
Student04 | Languages | male | 60 | 55 | 100 | 100 |
Student05 | Languages | female | 68 | 80 | 95 | 80 |
Student12 | Mathematics | female | 100 | 75 | 70 | 85 |
Student13 | Languages | female | 100 | 80 | 100 | 90 |
Student14 | Languages | female | 50 | 45 | 55 | 90 |
Student15 | Languages | male | 95 | 35 | 100 | 90 |
Student16 | Languages | female | 100 | 50 | 30 | 70 |
Student17 | Languages | female | 80 | 100 | 55 | 65 |
Student18 | Mathematics | male | 30 | 49 | 55 | 75 |
Student19 | Languages | male | 68 | 90 | 88 | 70 |
Student20 | Mathematics | male | 40 | 45 | 40 | 80 |
Student01 | Languages | male | 80 | 70 | 75 | 80 |
Student02 | Mathematics | male | 90 | 88 | 100 | 90 |
Student06 | Mathematics | male | 100 | 99 | 100 | 90 |
Student07 | Mathematics | male | 85 | 68 | 90 | 90 |
Student08 | Languages | male | 100 | 90 | 90 | 85 |
Student09 | Mathematics | male | 80 | 50 | 65 | 75 |
Student10 | Languages | male | 85 | 100 | 100 | 90 |
Student11 | Languages | male | 86 | 85 | 100 | 100 |
Bootstrap Popover
Rank |
First Name |
Last Name |
Age |
Total |
Discount |
Date |
---|---|---|---|---|---|---|
1 | Philip Aaron Wong | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM |
11 | Aaron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM |
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM |
111 | Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM |
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM |
013 | Clark | Kent Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM |
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM |
10 | Alex | Dumass | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM |
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM |
166 | Bruce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM |
100 | Brenda Dexter | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM |
55 | Dennis | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM |
9 | Martha | delFuego | 25 | $22.09 | 17% | 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']
});
});