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-05-11 17:46:54 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/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" >
2012-09-27 19:57:19 +00:00
< 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" >
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 >
2012-11-14 22:52:30 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2011-10-11 05:48:34 +00:00
$("table").tablesorter({
2012-09-27 19:57:19 +00:00
widthFixed : true,
2012-12-26 08:06:26 +00:00
headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
2012-09-27 19:57:19 +00:00
widgets: ["columns", "filter", "stickyHeaders", "uitheme", "zebra"] , //[ '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"],
2012-09-27 19:57:19 +00:00
// use uitheme widget to apply defauly jquery ui (jui) class names
// see the uitheme demo for more details on how to change the class names
uitheme : 'jui'
2012-03-27 19:45:51 +00:00
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() {
2012-09-27 19:57:19 +00:00
$('link.theme').each(function(){ this.disabled = true; });
2012-11-14 22:52:30 +00:00
var themes = 'default blue green grey ice black-ice dark dropbox',
2012-09-27 19:57:19 +00:00
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length ; i + + ) {
o += '< option > ' + t[i] + '< / option > ';
}
2012-03-27 19:45:51 +00:00
2012-09-27 19:57:19 +00:00
$('select')
.append(o)
.change(function(){
2012-03-27 19:45:51 +00:00
var theme = $(this).val().toLowerCase(),
files = $('link.theme, link.ui-theme'); // ui-theme is added by the themeswitcher
files.each(function(){ this.disabled = true; });
2012-09-27 19:57:19 +00:00
files.filter('[href*="' + (theme === 'jui' ? 'ui' : theme) + '"]').each(function(){ this.disabled = false; });
$('table')
2012-11-14 22:52:30 +00:00
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
.addClass('tablesorter-' + theme.replace(/-/,''));
2012-03-27 19:45:51 +00:00
});
});
< / 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-12-26 08:06:26 +00:00
< li > You will need to modify the < code > headerTemplate< / code > option to include the jQuery UI icon! See the example in the code. < span class = "tip" > < em > New!< / em > < / span > v2.7!< / 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-09-27 19:57:19 +00:00
< li > Added < code > 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-09-27 19:57:19 +00:00
< li > The filter widget adds a row to the table header, but that row will not be included in the sticky header.< / li >
< li > Add the class name < code > 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 >
< li > < del > Because of an issue with jQuery version 1.3 and older causing an error, this widget needs at least jQuery version 1.4+ in order to work.< / del > Now working with jQuery 1.2.6+ again.< / li >
< li > Because of the limitations of Internet Explorer version 7 and older, this widget will not work.< / li >
< li > < del > For the sticky header to work properly if any < code > < TD> < / code > 's are included within the header:< / del > < span class = "tip" > < em > Fixed! v2.4< / em > < / span >
2012-04-21 12:37:53 +00:00
< ul >
2012-09-27 19:57:19 +00:00
< li > < del > Set the < code > selectorHeaders< / code > option to < code > thead th, thead td< / code > .< / del > < / li >
< li > < del > The < code > < TD> < / code > may not be styled properly, so CSS changes may be needed.< / del > < / li >
< li > < del > To prevent the < code > < TD> < / code > from being sortable, add a < code > sorter-false< / code > class name.< / del > < / li >
2012-04-21 12:37:53 +00:00
< / ul >
< / 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 >
2012-09-27 19:57:19 +00:00
< option value = "jui" > Jquery UI< / option >
2012-03-27 19:45:51 +00:00
< / select >
2012-09-27 19:57:19 +00:00
< br > < br >
2012-03-27 19:45:51 +00:00
2012-11-14 22:52:30 +00:00
< table class = "tablesorter" borderspacing = "10" >
2012-09-27 19:57:19 +00:00
< caption > Table caption< / caption >
2011-10-11 05:48:34 +00:00
< 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 >
2012-09-27 19:57:19 +00:00
< 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 >
2011-10-11 05:48:34 +00:00
< / 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 >
