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 -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-1.4.4.min.js" > < / script >
2011-10-11 05:48:34 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
2013-01-26 15:21:13 +00:00
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
2011-10-11 05:48:34 +00:00
< script src = "js/docs.js" > < / script >
2011-10-15 14:58:44 +00:00
<!-- Tablesorter: theme -->
2014-05-21 22:09:23 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2012-09-27 19:57:19 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "../css/theme.jui.css" >
2014-05-21 22:09:23 +00:00
< link class = "theme default" rel = "stylesheet" href = "../css/theme.default.css" >
< link class = "theme blue" rel = "stylesheet" href = "../css/theme.blue.css" >
< link class = "theme green" rel = "stylesheet" href = "../css/theme.green.css" >
< link class = "theme grey" rel = "stylesheet" href = "../css/theme.grey.css" >
< link class = "theme ice" rel = "stylesheet" href = "../css/theme.ice.css" >
< link class = "theme black-ice" rel = "stylesheet" href = "../css/theme.black-ice.css" >
< link class = "theme dark" rel = "stylesheet" href = "../css/theme.dark.css" >
< link class = "theme dropbox" rel = "stylesheet" href = "../css/theme.dropbox.css" >
2011-10-15 14:58:44 +00:00
2013-12-08 20:52:13 +00:00
< style id = "css" > / * w r a p p e r o f t a b l e 2 * /
.wrapper {
position: relative;
2013-12-08 20:57:31 +00:00
padding: 0 5px;
2013-12-08 20:52:13 +00:00
height: 250px;
overflow-y: auto;
}< / style >
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
2013-12-08 20:52:13 +00:00
var options = {
2012-09-27 19:57:19 +00:00
widthFixed : true,
2013-04-02 18:05:55 +00:00
showProcessing: true,
2012-12-26 08:06:26 +00:00
headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
2013-04-01 16:02:48 +00:00
widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
2012-09-27 19:57:19 +00:00
2012-03-07 18:06:35 +00:00
widgetOptions: {
2012-03-27 19:45:51 +00:00
2013-12-08 20:52:13 +00:00
// extra class name added to the sticky header row
2013-10-08 17:41:44 +00:00
stickyHeaders : '',
2013-12-08 20:52:13 +00:00
// number or jquery selector targeting the position:fixed element
stickyHeaders_offset : 0,
// added to table ID, if it exists
stickyHeaders_cloneId : '-sticky',
// trigger "resize" event on headers
stickyHeaders_addResizeEvent : true,
// if false and a caption exist, it won't be included in the sticky header
stickyHeaders_includeCaption : true,
// The zIndex of the stickyHeaders, allows the user to adjust this to their needs
stickyHeaders_zIndex : 2,
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo : null,
2014-05-06 01:16:59 +00:00
// scroll table top into view after filtering
stickyHeaders_filteredToTop: true,
2012-03-27 19:45:51 +00:00
// 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-07 18:06:35 +00:00
}
2013-12-08 20:52:13 +00:00
};
$("#table1").tablesorter(options);
2012-03-27 19:45:51 +00:00
2013-12-08 20:52:13 +00:00
/* make second table scroll within its wrapper */
options.widgetOptions.stickyHeaders_attachTo = '.wrapper'; // or $('.wrapper')
$("#table2").tablesorter(options);
2011-10-11 05:48:34 +00:00
2013-05-09 04:36:06 +00:00
});< / script >
2012-03-27 19:45:51 +00:00
< script >
$(function() {
2013-11-13 22:26:37 +00:00
$('link.theme, link.ui-theme').each(function(){ this.disabled = true; });
2012-09-27 19:57:19 +00:00
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
2013-05-09 04:36:06 +00:00
$('select:first')
2012-09-27 19:57:19 +00:00
.append(o)
.change(function(){
2012-03-27 19:45:51 +00:00
var theme = $(this).val().toLowerCase(),
2014-05-21 22:09:23 +00:00
name = theme === 'jui' ? 'ui-theme' : theme,
2013-11-13 22:26:37 +00:00
// ui-theme is added by the themeswitcher
files = $('link.theme, link.ui-theme').each(function(){
this.disabled = true;
})
2014-05-21 22:09:23 +00:00
files.filter('.' + name).each(function(){
2013-11-13 22:26:37 +00:00
this.disabled = false;
});
2012-09-27 19:57:19 +00:00
$('table')
2012-11-14 22:52:30 +00:00
.removeClass('tablesorter-' + t.join(' tablesorter-') + ' tablesorter-jui')
.addClass('tablesorter-' + theme.replace(/-/,''));
2013-11-13 22:26:37 +00:00
}).change();
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 >
2014-05-06 01:16:59 +00:00
< li > In < span class = "version updated" > v2.16.2< / span > , added a < code > stickyHeaders_filteredToTop< / code > option which when < code > true< / code > will scroll table top into view after filtering< / li >
2013-04-13 02:15:57 +00:00
< li > As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.< / li >
2013-12-08 20:52:13 +00:00
< li > Added < code > cssStickyHeaders_attachTo< / code > option (default set to < code > null< / code > ) in < span class = "version" > v2.14.4< / span > .
< ul >
< li > Setting this option with either a jQuery selector string (< code > " .wrapper" < / code > ) or jQuery object (< code > $(" .wrapper" )< / code > ).< / li >
< li > This option contains the target to which the sticky header will attach - see the < a href = "#table2" > second example< / a > below.< / li >
< / ul >
< / li >
2013-05-09 04:36:06 +00:00
< li > Added a widget option named < code > stickyHeaders_cloneId< / code > (< span class = "version" > v2.9< / span > )
2013-03-31 17:18:20 +00:00
< ul >
< li > It contains a suffix to add to any table id.< / li >
< li > Its default value is < code > -sticky< / code > < / li >
< / ul >
< / li >
2013-05-09 04:36:06 +00:00
< li > To access the added sticky table content from your code without worrying about using the ID, you can use < code > table.config.widgetOptions.$sticky< / code > .< / li >
< li > Table captions and any additional rows (filter widget row) will also be included in the sticky header (< span class = "version" > v2.9< / span > ).< / li >
< li > You will need to modify the < code > headerTemplate< / code > option to include the jQuery UI icon! See the example in the code (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 >
2013-10-08 17:41:44 +00:00
< li > Added a widget option named < code > stickyHeaders< / code > option which contains the css class name applied to the actual sticky header (v2.1). Modified in < span class = "version" > v2.11< / span > so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.< / li >
2013-03-31 17:18:20 +00:00
< li > Multiple rows in the header will become sticky (v2.1.17).< / 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 >
2013-03-31 17:18:20 +00:00
< li > Add the class name < code > sticky-false< / code > to any header rows you don't want to become sticky (v2.1.18).< / li >
2012-09-27 19:57:19 +00:00
< 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 >
2014-07-18 01:42:01 +00:00
< p >
2011-10-11 05:48:34 +00:00
2013-12-08 20:52:13 +00:00
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "prettyprint lang-css" > < / pre >
< / div >
2011-10-11 05:48:34 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-javascript" > < / pre >
2011-10-11 05:48:34 +00:00
< / 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
2013-12-08 20:52:13 +00:00
< table id = "table1" class = "tablesorter" >
2013-04-01 16:02:48 +00:00
< caption > Student Grades< / caption >
2011-10-11 05:48:34 +00:00
< thead >
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 >
2013-12-08 20:52:13 +00:00
< div class = "narrow-block wrapper" >
< table id = "table2" class = "tablesorter" >
< caption > Student Grades< / caption >
2011-10-11 05:48:34 +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 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 >
