2013-12-17 23:39:39 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Column Selector Widget (beta)< / title >
<!-- jQuery -->
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > < / script >
<!-- Demo stuff -->
2014-02-01 16:19:26 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/cupertino/jquery-ui.css" >
< script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" > < / script >
2014-02-06 04:20:25 +00:00
< link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" >
< script src = "http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" > < / script >
2013-12-17 23:39:39 +00:00
< 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 >
2013-12-18 00:34:08 +00:00
< script src = "../js/widgets/widget-columnSelector.js" > < / script >
2014-02-06 04:20:25 +00:00
< style >
/* override document styling */
.popover.right { text-align: left; }
.ui-widget-content a { color: #428bca; }
< / style >
2013-12-17 23:39:39 +00:00
2014-02-06 04:20:25 +00:00
< style id = "css" > / * * * c u s t o m c s s o n l y p o p u p * * * /
.columnSelectorWrapper {
2013-12-17 23:39:39 +00:00
position: relative;
margin: 10px 0;
2014-02-06 04:20:25 +00:00
display: inline-block;
2013-12-17 23:39:39 +00:00
}
.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 {
2014-02-06 04:20:25 +00:00
width: 120px;
2013-12-17 23:39:39 +00:00
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;
}
2014-02-06 04:20:25 +00:00
.columnSelector input {
margin-right: 5px;
}
2013-12-17 23:39:39 +00:00
.columnSelector .disabled {
color: #ddd;
2014-02-06 04:20:25 +00:00
}
/*** Bootstrap popover ***/
#popover-target label {
margin: 0 5px;
}
#popover-target input {
margin-right: 5px;
}
< / style >
2013-12-17 23:39:39 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2014-02-06 04:20:25 +00:00
/*** custom css only button popup ***/
$(".custom-popup").tablesorter({
2013-12-17 23:39:39 +00:00
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 : {
2014-02-06 04:20:25 +00:00
0: 'disable' /* set to disabled; not allowed to unselect it */
2013-12-17 23:39:39 +00:00
},
2014-02-06 04:20:25 +00:00
// remember selected columns (requires $.tablesorter.storage)
2013-12-17 23:39:39 +00:00
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'
}
});
2014-02-06 04:20:25 +00:00
/*** 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']
});
2013-12-17 23:39:39 +00:00
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Column Selector Widget (beta)< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
< 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 header includes rows with row or column spans.< / li >
< li > The responsive part of this widget
< ul >
2014-02-06 04:20:25 +00:00
< 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 >
2013-12-17 23:39:39 +00:00
< 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 >
2014-02-06 04:20:25 +00:00
< h4 > Column selector widget default options (added inside of tablesorter < code > widgetOptions< / code > )< / h4 >
< table class = "tablesorter-blue" >
< thead >
< tr > < th > Option< / th > < th > Description< / th > < / tr >
< / thead >
< tbody >
< tr >
< td > < code > columnSelector_container< / code > < / td >
< td >
Target an element within the current page where the column selector will be inserted.
< 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 >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_columns< / code > < / td >
< td >
Assigns a column status for each selector:
< 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 : {
2013-12-17 23:39:39 +00:00
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 >
2014-02-06 04:20:25 +00:00
< / ul >
Default value: < code > {}< / code > ; empty object
< / td >
< / tr >
2013-12-17 23:39:39 +00:00
2014-02-06 04:20:25 +00:00
< tr >
< td > < code > columnSelector_saveColumns< / code > < / td >
< td > Save the current manually set column status (not the column's responsive state). 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 >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_layout< / code > < / td >
< td >
This option defines the markup used for each column selector within the popup. 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!< br >
< br >
Default value: < code > '< label> < input type=" checkbox" > {name}< /label> '< / code >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_name< / code > < / td >
< td >
The data-attribute within the table header cell which contains an alternate column selector name.
< 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 >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_mediaquery< / code > < / td >
< td > Set this option to add (< code > true< / code > ) or not add (< code > false< / code > ) the media query functionality of this widget.< br >
< br >
Default value: < code > true< / code >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_mediaqueryName< / code > < / 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. Set as "Auto" to signify to the user that columns disappearing and/or reappearing is automatically done.< br >
< br >
Default value: < code > " Auto: " < / code >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_mediaqueryState< / code > < / td >
< td > Set this option to < code > false< / code > to start with the media query disabled (manual column selection mode).< br >
< br >
Default value: < code > true< / code >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_breakpoints< / code > < / td >
< td >
< ul >
< li > This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.< / li >
< li > For example, the last entry " 70em" (1,120px) is assigned to data-priority 6. When the browser width is below this dimension, all columns with a data-priority of six will be hidden. Then when a browser width less than " 60em" (960px) is reached, all columns of data-priority 5 and above will be hidden. At " 50em" (800px), all columns of data-priority 4 and above are hidden, etc.< / li >
< li > Adjust these values as desired, but a < em > maximum< / em > of six data-priorities is set.< / li >
< / ul >
Default value: < code > [ " 20em" , " 30em" , " 40em" , " 50em" , " 60em" , " 70em" ]< / code >
< / td >
< / tr >
< tr >
< td > < code > columnSelector_priority< / code > < / td >
< td >
This is the assigned data-attribute which contains the defined data priority for a table column.
< 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 >
< / td >
< / tr >
< / tbody >
< / table >
2013-12-17 23:39:39 +00:00
< / 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:
< 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 in order of priority:
< ul >
< li > jQuery data < code > data-columnSelector="false"< / code > .< / li >
< li > metadata < code > class=" { columnSelector : false }" < / code > .< / li >
< li > headers option < code > headers : { 0 : { columnSelector: false } }< / code > .< / li >
< li > header class name < code > class=" columnSelector-false" < / code > .< / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< / p >
< h1 > Demo< / h1 >
2014-02-06 04:20:25 +00:00
< h3 > CSS only popup< / h3 >
2013-12-17 23:39:39 +00:00
<!-- 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 >
2014-02-06 04:20:25 +00:00
< / div > (When "Auto" is set, the table becomes responsive; resize the browser window to see it work)
2013-12-17 23:39:39 +00:00
2014-02-06 04:20:25 +00:00
< table class = "tablesorter custom-popup" >
2013-12-17 23:39:39 +00:00
< thead >
< tr >
< th data-priority = "critical" > Name< / th >
<!-- Remove column from selection popup by including -->
2014-02-06 04:20:25 +00:00
<!-- data - priority="Anything other than 1 - 6" OR data - column - selector="false" OR class="columnSelector - false" -->
2013-12-17 23:39:39 +00:00
< th class = "columnSelector-false" > Major< / th >
2014-01-07 23:35:35 +00:00
< th data-priority = "6" data-selector-name = "Gender" > Sex< / th >
2013-12-17 23:39:39 +00:00
< 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 >
2014-02-06 04:20:25 +00:00
< 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 >
2013-12-17 23:39:39 +00:00
< 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 >
2014-02-06 04:20:25 +00:00
< / 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 >
< 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 >
2013-12-17 23:39:39 +00:00
< / tbody >
< / table >
< h1 > Css< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div >
2014-02-06 04:20:25 +00:00
< pre class = "prettyprint lang-html" > < h3> CSS only popup< /h3>
< !-- This selector markup is completely customizable -->
2013-12-17 23:39:39 +00:00
< 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>
2014-02-06 04:20:25 +00:00
< table class=" tablesorter custom-popup" >
2013-12-17 23:39:39 +00:00
< 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=" false" OR class=" columnSelector-false" -->
< th class=" columnSelector-false" > Major< /th>
2014-01-07 23:35:35 +00:00
< th data-priority=" 6" data-selector-name=" Gender" > Sex< /th>
2013-12-17 23:39:39 +00:00
< 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>
2014-02-06 04:20:25 +00:00
< /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>
2013-12-17 23:39:39 +00:00
< /table> < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-js" > < / pre >
< / div >
< / div >
< / body >
< / html >
