2011-10-11 05:48:34 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Sticky Header Widget< / title >
<!-- jQuery -->
2012-03-18 14:02:11 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" > < / script >
2011-10-11 05:48:34 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
< script src = "js/chili/jquery.chili-2.2.js" > < / script >
< script src = "js/chili/recipes.js" > < / script >
< script src = "js/docs.js" > < / script >
2011-10-15 14:58:44 +00:00
<!-- Tablesorter: theme -->
2012-03-27 19:45:51 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" >
< link class = "ui-theme" rel = "stylesheet" href = "../css/ui/style.css" >
< link class = "theme" rel = "stylesheet" href = "../css/blue/style.css" >
< link class = "theme" rel = "stylesheet" href = "../css/green/style.css" disabled >
2011-10-15 14:58:44 +00:00
<!-- Tablesorter script: required -->
2011-10-11 05:48:34 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
$("table").tablesorter({
2012-04-21 12:37:53 +00:00
selectorHeaders: 'thead th, thead td',
2012-03-27 19:45:51 +00:00
widgets: [ 'uitheme', 'zebra', 'stickyHeaders' ],
2012-03-07 18:06:35 +00:00
widgetOptions: {
2012-03-27 19:45:51 +00:00
2012-03-07 18:06:35 +00:00
// css class name applied to the sticky header row (tr)
2012-03-27 19:45:51 +00:00
stickyHeaders : 'tablesorter-stickyHeader',
// adding zebra striping, using content and default styles - the ui css removes the background from default
// even and odd class names included for this demo to allow switching themes
zebra : ["ui-widget-content even", "ui-state-default odd"],
// change default uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
// default icons: ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"]
// ["up/down arrow (cssHeaders/unsorted)", "down arrow (cssDesc/descending)", "up arrow (cssAsc/ascending)" ]
uitheme : ["ui-icon-carat-2-n-s", "ui-icon-carat-1-s", "ui-icon-carat-1-n"]
2012-03-07 18:06:35 +00:00
}
2012-03-27 19:45:51 +00:00
2011-10-11 05:48:34 +00:00
});
}); < / script >
2012-03-27 19:45:51 +00:00
< script >
$(function() {
$('link.theme').each(function(){ this.disabled = true; });
$('select').change(function(){
var theme = $(this).val().toLowerCase(),
files = $('link.theme, link.ui-theme'); // ui-theme is added by the themeswitcher
files.each(function(){ this.disabled = true; });
files.filter('[href*="' + theme + '"]').each(function(){ this.disabled = false; });
});
});
< / script >
2011-10-11 05:48:34 +00:00
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Sticky Header Widget< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
< em > NOTE!< / em >
< ul >
< li > This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.< / li >
2012-03-07 18:06:35 +00:00
< li > Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!< / li >
2012-04-21 12:37:53 +00:00
< li > Added < code class = "hilight" > widgetOptions.stickyHeader< / code > option which contains the css class name applied to the actual sticky header. < span class = "tip" > < em > New! v2.1< / em > < / span > < / li >
2012-04-23 19:24:45 +00:00
< li > Multiple rows in the header will become sticky. < span class = "tip" > < em > New! v2.1.17< / em > < / span > < / li >
2012-04-21 12:37:53 +00:00
< li > For the sticky header to work properly if any < code class = "hilight" > < TD> < / code > 's are included within the header:
< ul >
< li > Set the < code class = "hilight" > selectorHeaders< / code > option to < code class = "hilight" > thead th, thead td< / code > .< / li >
< li > The < code class = "hilight" > < TD> < / code > may not be styled properly, so CSS changes may be needed.< / li >
< li > To prevent the < code class = "hilight" > < TD> < / code > from being sortable, add a < code class = "hilight" > sorter-false< / code > class name.< / li >
< / ul >
< / li >
2012-04-23 19:24:45 +00:00
< li > Add the class name < code class = "hilight" > sticky-false< / code > to any header rows you don't want to become sticky. < span class = "tip" > < em > New! v2.1.18< / em > < / span > < / li >
2012-03-18 14:02:11 +00:00
< li > Because of an issue with jQuery version 1.2.6 causing an error, this widget needs at least jQuery version 1.3+ in order to work.< / li >
< li > Because of the limitations of Internet Explorer version 7 and older, this widget will not work.< / li >
2011-10-11 05:48:34 +00:00
< / ul >
< / p >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "js" > < / pre >
< / div >
< h1 > Demo< / h1 >
2012-03-27 19:45:51 +00:00
Choose Theme:
< select >
< option > UI< / option >
< option > Blue< / option >
< option > Green< / option >
< / select >
2011-10-11 05:48:34 +00:00
< table class = "tablesorter" >
< thead >
2012-04-21 12:37:53 +00:00
< tr >
< th colspan = "3" class = "sorter-false" > Personal Information for each person (resize the browser to check expanding height)< / th >
< td colspan = "4" class = "sorter-false" > Courses (this is a TD cell)< / td >
< / tr >
2011-10-11 05:48:34 +00:00
< tr > < th > Name< / th > < th > Major< / th > < th > Sex< / th > < th > English< / th > < th > Japanese< / th > < th > Calculus< / th > < th > 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 >
< div class = "narrow-block" >
< table class = "tablesorter" >
< 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 class = "next-up" >
< hr / >
2011-10-26 06:50:02 +00:00
Next up: < a href = "example-widget-zebra.html" > Zebra stripe widget › › < / a >
2011-10-11 05:48:34 +00:00
< / div >
< / div >
< / body >
< / html >
