2013-11-25 12:59:30 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - CSS Sticky Header Widget< / title >
<!-- jQuery -->
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" > < / script >
<!-- Demo stuff -->
2014-05-05 18:25:37 +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 >
2013-11-25 12:59:30 +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: theme -->
< link class = "ui-theme" rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.css" >
< link class = "ui-theme" rel = "stylesheet" href = "../css/theme.jui.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.default.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.blue.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.green.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.grey.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.ice.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.black-ice.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.dark.css" >
< link class = "theme" rel = "stylesheet" href = "../css/theme.dropbox.css" >
2013-12-08 20:02:02 +00:00
< style id = "css" > / * w r a p p e r o f t a b l e 2 * /
.wrapper {
position: relative;
top: 50px;
height: 250px;
overflow-x: auto;
}< / style >
2013-11-25 12:59:30 +00:00
<!-- Tablesorter script: required -->
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script src = "../js/widgets/widget-cssStickyHeaders.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
2013-12-08 20:02:02 +00:00
var options = {
2013-11-25 12:59:30 +00:00
widthFixed : true,
showProcessing: true,
headerTemplate: '{content} {icon}', // Add icon for jui theme; new in v2.7!
widgets: [ 'uitheme', 'zebra', 'cssStickyHeaders', 'filter' ],
widgetOptions: {
2014-05-05 18:25:37 +00:00
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
cssStickyHeaders_attachTo : null,
cssStickyHeaders_filteredToTop : true,
cssStickyHeaders_zIndex : 10
2013-11-25 12:59:30 +00:00
}
2013-12-08 20:02:02 +00:00
};
$("#table1").tablesorter(options);
/* make second table scroll within its wrapper */
options.widgetOptions.cssStickyHeaders_attachTo = '.wrapper' // or $('.wrapper')
$("#table2").tablesorter(options);
2013-11-25 12:59:30 +00:00
});< / script >
< script >
$(function() {
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
var themes = 'default blue green grey ice black-ice dark dropbox',
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length ; i + + ) {
o += '< option > ' + t[i] + '< / option > ';
}
$('select:first')
.append(o)
.change(function(){
var theme = $(this).val().toLowerCase(),
name = theme === 'jui' ? 'ui' : 'theme.' + theme,
// ui-theme is added by the themeswitcher
files = $('link.theme, link.ui-theme').each(function(){
this.disabled = true;
})
files.filter('[href$="' + name + '.css"]').each(function(){
this.disabled = false;
});
$('table')
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
.addClass('tablesorter-' + theme.replace(/-/,''));
}).change();
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2013-12-08 20:02:02 +00:00
< h2 > CSS Sticky Header Widget< / h2 >
2013-11-25 12:59:30 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2014-05-05 18:25:37 +00:00
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
2013-11-25 12:59:30 +00:00
< ul >
2013-12-08 20:02:02 +00:00
< li > This demo uses the CSS Sticky Headers widget which uses CSS transforms to reposition the table head.< / li >
2013-11-25 12:59:30 +00:00
< li > < a href = "http://caniuse.com/#search=transform" > CSS transforms< / a > are supported by most modern browsers (not IE8 and older).< / li >
2014-05-05 18:25:37 +00:00
< li > The jQuery UI themed table does not stick to the top of the page due to the extra padding. Adjust the < code > cssStickyHeaders_offset< / code > option as desired. I didn't bother in this demo because it includes more than just the jQuery UI theme.< / li >
< li > This widget < em > will not work< / em > with the original tablesorter, but works optimally with tablesorter v2.8+ (Added < span class = "version" > v2.14.2< / span > ; Updated < span class = "version updated" > v2.14.4< / span > )< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Change log< / a > < / h3 >
< div >
< ul >
< li > In < span class = "version" > v2.16.4< / span > , added the < code > cssStickyHeaders_filteredToTop< / code > option. When < code > true< / code > the table top will scroll into view after being filtered. This is done because if the sticky header is active, and a filter results in say only one row, the table will scroll up out of the browser viewport. If setn to < code > false< / code > , no scrolling is done.< / li >
2013-12-08 20:02:02 +00:00
< li > In < span class = "version" > v2.14.4< / span > :
< ul >
< li > Added < code > cssStickyHeaders_attachTo< / code > (default set to < code > null< / code > ). Setting this option with either a jQuery selector string (< code > " .wrapper" < / code > ) or jQuery object (< code > $(" .wrapper" )< / code > ) to attach the sticky header to this element - see the second example below.< / li >
< li > Removed < code > cssStickyHeaders_offsetX< / code > option & renamed < code > cssStickyHeaders_offsetY< / code > to < code > cssStickyHeaders_offset< / code > as the horizontal offset is not required.< / li >
2014-05-05 18:25:37 +00:00
< / ul > < br >
2013-12-08 20:02:02 +00:00
< / li >
2013-11-25 12:59:30 +00:00
< / ul >
2014-05-05 18:25:37 +00:00
< / div >
< / div >
< p >
2013-11-25 12:59:30 +00:00
2013-12-08 20:02:02 +00:00
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
2013-11-25 12:59:30 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > Demo< / h1 >
Choose Theme:
< select >
< option value = "jui" > Jquery UI< / option >
< / select >
< br > < br >
2013-12-08 20:02:02 +00:00
< h1 > Attach sticky header to browser window< / h1 >
< table id = "table1" class = "tablesorter" >
< caption > Student Grades< / caption >
2013-11-25 12:59:30 +00:00
< thead >
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th class = "filter-false sorter-false" > 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 >
< 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 > 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 > 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 >
< 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 > Student21< / td > < td > Languages< / td > < td > male< / td > < td > 50< / td > < td > 45< / td > < td > 100< / td > < td > 100< / td > < / tr >
< tr > < td > Student22< / td > < td > Mathematics< / td > < td > male< / td > < td > 100< / td > < td > 99< / td > < td > 100< / td > < td > 90< / td > < / tr >
< tr > < td > Student23< / td > < td > Languages< / td > < td > female< / td > < td > 85< / td > < td > 80< / td > < td > 80< / td > < td > 80< / td > < / tr >
< tr > < td > student23< / td > < td > Mathematics< / td > < td > male< / td > < td > 82< / td > < td > 77< / td > < td > 0< / td > < td > 79< / td > < / tr >
< tr > < td > student24< / td > < td > Languages< / td > < td > female< / td > < td > 100< / td > < td > 91< / td > < td > 13< / td > < td > 82< / td > < / tr >
< tr > < td > student25< / td > < td > Mathematics< / td > < td > male< / td > < td > 22< / td > < td > 96< / td > < td > 82< / td > < td > 53< / td > < / tr >
< tr > < td > student26< / td > < td > Languages< / td > < td > female< / td > < td > 37< / td > < td > 29< / td > < td > 56< / td > < td > 59< / td > < / tr >
< tr > < td > student27< / td > < td > Mathematics< / td > < td > male< / td > < td > 86< / td > < td > 82< / td > < td > 69< / td > < td > 23< / td > < / tr >
< tr > < td > student28< / td > < td > Languages< / td > < td > female< / td > < td > 44< / td > < td > 25< / td > < td > 43< / td > < td > 1< / td > < / tr >
< tr > < td > student29< / td > < td > Mathematics< / td > < td > male< / td > < td > 77< / td > < td > 47< / td > < td > 22< / td > < td > 38< / td > < / tr >
< tr > < td > student30< / td > < td > Languages< / td > < td > female< / td > < td > 19< / td > < td > 35< / td > < td > 23< / td > < td > 10< / td > < / tr >
< tr > < td > student31< / td > < td > Mathematics< / td > < td > male< / td > < td > 90< / td > < td > 27< / td > < td > 17< / td > < td > 50< / td > < / tr >
< tr > < td > student32< / td > < td > Languages< / td > < td > female< / td > < td > 60< / td > < td > 75< / td > < td > 33< / td > < td > 38< / td > < / tr >
< tr > < td > student33< / td > < td > Mathematics< / td > < td > male< / td > < td > 4< / td > < td > 31< / td > < td > 37< / td > < td > 15< / td > < / tr >
< tr > < td > student34< / td > < td > Languages< / td > < td > female< / td > < td > 77< / td > < td > 97< / td > < td > 81< / td > < td > 44< / td > < / tr >
< tr > < td > student35< / td > < td > Mathematics< / td > < td > male< / td > < td > 5< / td > < td > 81< / td > < td > 51< / td > < td > 95< / td > < / tr >
< tr > < td > student36< / td > < td > Languages< / td > < td > female< / td > < td > 70< / td > < td > 61< / td > < td > 70< / td > < td > 94< / td > < / tr >
< tr > < td > student37< / td > < td > Mathematics< / td > < td > male< / td > < td > 60< / td > < td > 3< / td > < td > 61< / td > < td > 84< / td > < / tr >
< tr > < td > student38< / td > < td > Languages< / td > < td > female< / td > < td > 63< / td > < td > 39< / td > < td > 0< / td > < td > 11< / td > < / tr >
< tr > < td > student39< / td > < td > Mathematics< / td > < td > male< / td > < td > 50< / td > < td > 46< / td > < td > 32< / td > < td > 38< / td > < / tr >
< tr > < td > student40< / td > < td > Languages< / td > < td > female< / td > < td > 51< / td > < td > 75< / td > < td > 25< / td > < td > 3< / td > < / tr >
< tr > < td > student41< / td > < td > Mathematics< / td > < td > male< / td > < td > 43< / td > < td > 34< / td > < td > 28< / td > < td > 78< / td > < / tr >
< tr > < td > student42< / td > < td > Languages< / td > < td > female< / td > < td > 11< / td > < td > 89< / td > < td > 60< / td > < td > 95< / td > < / tr >
< tr > < td > student43< / td > < td > Mathematics< / td > < td > male< / td > < td > 48< / td > < td > 92< / td > < td > 18< / td > < td > 88< / td > < / tr >
< tr > < td > student44< / td > < td > Languages< / td > < td > female< / td > < td > 82< / td > < td > 2< / td > < td > 59< / td > < td > 73< / td > < / tr >
< tr > < td > student45< / td > < td > Mathematics< / td > < td > male< / td > < td > 91< / td > < td > 73< / td > < td > 37< / td > < td > 39< / td > < / tr >
< tr > < td > student46< / td > < td > Languages< / td > < td > female< / td > < td > 4< / td > < td > 8< / td > < td > 12< / td > < td > 10< / td > < / tr >
< tr > < td > student47< / td > < td > Mathematics< / td > < td > male< / td > < td > 89< / td > < td > 10< / td > < td > 6< / td > < td > 11< / td > < / tr >
< tr > < td > student48< / td > < td > Languages< / td > < td > female< / td > < td > 90< / td > < td > 32< / td > < td > 21< / td > < td > 18< / td > < / tr >
< tr > < td > student49< / td > < td > Mathematics< / td > < td > male< / td > < td > 42< / td > < td > 49< / td > < td > 49< / td > < td > 72< / td > < / tr >
< tr > < td > student50< / td > < td > Languages< / td > < td > female< / td > < td > 56< / td > < td > 37< / td > < td > 67< / td > < td > 54< / td > < / tr >
< / tbody >
< / table >
2013-12-08 20:02:02 +00:00
< h1 > Attach sticky header to its parent< / h1 >
< div class = "narrow-block wrapper" >
< table id = "table2" class = "tablesorter" >
< caption > Student Grades< / caption >
2013-11-25 12:59:30 +00:00
< thead >
< tr > < th > Account #< / th > < th > First Name< / th > < th > Last Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Diff< / th > < / tr >
< / thead >
< tbody >
< tr > < td > A43< / td > < td > Peter< / td > < td > Parker< / td > < td > 28< / td > < td > 9.99< / td > < td > 20.3%< / td > < td > +3< / td > < / tr >
< tr > < td > A255< / td > < td > John< / td > < td > Hood< / td > < td > 33< / td > < td > 19.99< / td > < td > 25.1%< / td > < td > -7< / td > < / tr >
< tr > < td > A33< / td > < td > Clark< / td > < td > Kent< / td > < td > 18< / td > < td > 15.49< / td > < td > 44.2%< / td > < td > -13< / td > < / tr >
< tr > < td > A11< / td > < td > Bruce< / td > < td > Almighty< / td > < td > 45< / td > < td > 153.19< / td > < td > 44%< / td > < td > +19< / td > < / tr >
< tr > < td > A102< / td > < td > Bruce< / td > < td > Evans< / td > < td > 56< / td > < td > 153.19< / td > < td > 23%< / td > < td > +9< / td > < / tr >
< tr > < td > A23< / td > < td > Mike< / td > < td > Peters< / td > < td > 22< / td > < td > 5.69< / td > < td > 20.3%< / td > < td > +2< / td > < / tr >
< tr > < td > A55< / td > < td > Leslie< / td > < td > Kent< / td > < td > 33< / td > < td > 15.99< / td > < td > 25.1%< / td > < td > -3< / td > < / tr >
< tr > < td > A3< / td > < td > Frank< / td > < td > Mint< / td > < td > 44< / td > < td > 12.59< / td > < td > 44.2%< / td > < td > -12< / td > < / tr >
< tr > < td > A21< / td > < td > Joe< / td > < td > Thomas< / td > < td > 45< / td > < td > 15.25< / td > < td > 44%< / td > < td > +12< / td > < / tr >
< tr > < td > A12< / td > < td > Tess< / td > < td > Evans< / td > < td > 66< / td > < td > 13.59< / td > < td > 23%< / td > < td > +4< / td > < / tr >
< tr > < td > A21< / td > < td > Peter< / td > < td > Dunn< / td > < td > 12< / td > < td > 2.99< / td > < td > 21.1%< / td > < td > +2< / td > < / tr >
< tr > < td > A33< / td > < td > Harry< / td > < td > Jones< / td > < td > 13< / td > < td > 19.49< / td > < td > 22.2%< / td > < td > -6< / td > < / tr >
< tr > < td > A13< / td > < td > John< / td > < td > James< / td > < td > 16< / td > < td > 13.89< / td > < td > 42.1%< / td > < td > -13< / td > < / tr >
< tr > < td > A71< / td > < td > Nick< / td > < td > Parker< / td > < td > 45< / td > < td > 13.89< / td > < td > 44%< / td > < td > +29< / td > < / tr >
< tr > < td > A21< / td > < td > Charles< / td > < td > Dunn< / td > < td > 19< / td > < td > 15.49< / td > < td > 22%< / td > < td > +3< / td > < / tr >
< / tbody >
< / table >
< / div >
< div class = "spacer" > < / div >
< / div >
< / body >
< / html >
