2013-04-08 05:40:39 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > jQuery plugin: Tablesorter 2.0 - Scroller Widget< / title >
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-1.4.4.min.js" > < / script >
2013-04-08 05:40:39 +00:00
<!-- Demo stuff -->
2015-01-14 19:19:02 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
< script src = "js/jquery-ui-latest.min.js" > < / script >
2013-04-08 05:40: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: theme -->
2014-05-21 22:09:23 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2013-04-08 05:40:39 +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" >
2014-09-27 16:35:42 +00:00
< link class = "theme metro-dark" rel = "stylesheet" href = "../css/theme.metro-dark.css" >
2013-04-08 05:40:39 +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-scroller.js" > < / script >
2014-06-18 19:37:24 +00:00
< style id = "css" > . n a m e { w i d t h : 2 0 % ; }
.major { width: 35%; }
.sex { width: 16%; }
.english{ width: 8%; }
.japanese { width: 8%; }
.calculus { width: 8%; }
.geometry { width: 100px; }< / style >
2013-04-08 05:40:39 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2015-01-14 19:19:02 +00:00
$('.tablesorter').tablesorter({
theme: 'jui',
2013-04-08 05:40:39 +00:00
widthFixed : true,
showProcessing: true,
headerTemplate : '{content} {icon}',
widgets: [ 'uitheme', 'zebra', 'filter', 'scroller' ],
widgetOptions : {
scroller_height : 300,
2014-06-26 17:09:59 +00:00
scroller_upAfterSort: true,
2013-04-08 05:40:39 +00:00
scroller_jumpToHeader: true,
2015-02-07 06:46:44 +00:00
// In tablesorter v2.19.0 the scroll bar width is auto-detected
2015-01-14 19:19:02 +00:00
// add a value here to override the auto-detected setting
scroller_barWidth : null
// scroll_idPrefix was removed in v2.18.0
// scroller_idPrefix : 's_'
2013-04-08 05:40:39 +00:00
}
});
});< / script >
< script >
$(function() {
2015-01-14 19:19:02 +00:00
$('.options').tablesorter({
theme: 'jui',
headerTemplate : '{content} {icon}',
widthFixed: true,
widgets: ['uitheme','stickyHeaders']
});
$('link.theme').each(function(){ this.disabled = true; });
2013-04-08 05:40:39 +00:00
var b = true, $tbl,
$c = $('#case'),
2015-01-14 19:19:02 +00:00
themes = 'default blue green grey ice black-ice dark dropbox metro-dark',
2013-04-08 05:40:39 +00:00
i, o = '', t = themes.split(' ');
for (i = 0; i < t.length ; i + + ) {
2014-10-09 21:04:28 +00:00
o += '< option value = "' + t[i] + '" > ' + t[i] + '< / option > ';
2013-04-08 05:40:39 +00:00
}
$('select')
.append(o)
2015-01-14 19:19:02 +00:00
.val('jui')
2013-04-08 05:40:39 +00:00
.change(function(){
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
2015-01-14 19:19:02 +00:00
files = $('link.theme').each(function(){
2013-11-13 22:26:37 +00:00
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;
});
2015-01-14 19:19:02 +00:00
// refresh uitheme widget class names
$('.tablesorter').each(function(){
if (this.config) {
this.config.theme = theme === 'black-ice' ? 'blackice' : theme;
}
});
$('table').trigger('applyWidgets');
2013-04-08 05:40:39 +00:00
// make sure columns align
$(window).trigger('resize');
2013-11-13 22:26:37 +00:00
}).change();
2013-04-08 05:40:39 +00:00
$tbl = $('.tablesorter-scroller-table table');
$('button').click(function(){
b = !b;
$tbl.each(function(){
this.config.widgetOptions.scroller_jumpToHeader = b;
$c.html(b + '');
});
2013-05-16 15:25:14 +00:00
return false;
2013-04-08 05:40:39 +00:00
});
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Scroller Widget< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2015-01-14 19:19:02 +00:00
< p > < / p >
< br >
< div class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
< li > In < span class = "version" > v2.17+< / span >
< ul >
< li > The scroller widget will now work properly with predefined column widths.< / li >
< li > Shrinking the browser window will now hide the header overflow.< / li >
< li > Horizontal scrolling of the table body will now properly horizontally scroll the header.< / li >
< li > Changed the default scroll bar width from < code > 17< / code > to < code > 18< / code > .< / li >
< li > Added < code > scroller_upAfterSort< / code > option.< / li >
< / ul >
< / li >
< li > This widget can not be applied to the original plugin and requires jQuery version 1.4+ to function properly; if you need to make it work with older versions of jQuery and the plugin, please use < a href = "http://tconnell.com/samples/scroller/" > this version< / a > of the widget.< / li >
< li > This widget was originally written by < a href = "http://tconnell.com/samples/scroller/" > Connell & Associates, Inc.< / a > and is dual-licensed under the MIT and GPL licenses. It has been modified to work with tablesorter version 2.9+.< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< h4 > Filter widget defaults (added inside of tablesorter < code > widgetOptions< / code > )< / h4 >
< div >
< span class = "label label-info" > TIP!< / span > Click on the link in the function column to reveal full details (or < a href = "#" class = "toggleAll" > toggle< / a > |< a href = "#" class = "showAll" > show< / a > |< a href = "#" class = "hideAll" > hide< / a > all) or double click to update the browser location.
< / div >
< table class = "options tablesorter-jui" data-sortlist = "[[0,0]]" >
< thead >
< tr > < th > Option< / th > < th > Default< / th > < th class = "sorter-false" > Description< / th > < / tr >
< / thead >
< tbody >
< tr id = "scroller-height" >
< td > < span class = "permalink" > scroller_height< / span > < / td >
< td > 300< / td >
< td > Set the height of the scroll window in pixels.< / td >
< / tr >
< tr id = "scroller-bar-width" >
< td > < a href = "#" class = "permalink" > scroller_barWidth< / a > < / td >
< td > null< / td >
2015-02-07 06:46:44 +00:00
< td > Set the width of the scroll bar in pixels (< span class = "version" > v2.19.0< / span > )
2015-01-14 19:19:02 +00:00
< div class = "collapsible" >
< br >
2015-02-07 06:46:44 +00:00
As of < span class = "version" > v2.19.0< / span > , this option's default was changed to < code > null< / code > because internal code was added to detect the scroll bar width which changes dramatically depending on the browser window zoom level.< br >
2015-01-14 19:19:02 +00:00
< br >
If you are using a custom scroll bar plugin, this option will still accept a scroll bar width value which overrides the scroll bar width auto-detection.
< / div >
< / td >
< / tr >
< tr id = "scroller-id-prefix" >
< td > < a href = "#" class = "permalink alert" > scroller_idPrefix< / a > < / td >
< td > "s_"< / td >
< td > This option contains a prefix string which is added to a random number (< span class = "alert" > Removed< / span > ).
< div class = "collapsible" >
< br >
This option was been completely removed in < span class = "version alert" > v2.18.0< / span > as the id is now obtained from the unique namespace.
< / td >
< / tr >
< tr id = "scroller-up-after-sort" >
< td > < a href = "#" class = "permalink" > scroller_upAfterSort< / a > < / td >
< td > true< / td >
< td >
< div class = "collapsible" >
< br >
When < code > true< / code > , the scroller automatically scrolls the inner window back to the top after sorting.< br >
< br >
Set this option to < code > false< / code > to prevent this behaviour, or to stop the window from scrolling after interacting with a table cell (e.g. clicking on a checkbox); new in < span class = "version" > v2.17.3< / span >
< / td >
< / tr >
< tr id = "scroller-jump-to-header" >
< td > < a href = "#" class = "permalink" > scroller_jumpToHeader< / a > < / td >
< td > true< / td >
< td >
< div class = "collapsible" >
< br >
When < code > true< / code > , this option makes the table header jump into view when the table body is not scolled to the top and while scrolling up the page. It's not perfect, but it works. Disable it as desired.< br >
< br >
< span class = "remark" > *< / span > < em > To see the difference, toggle the button in the demo below, then scroll down & up the page using a mouse wheel with the cursor at the horizontal center of the page and about 100 pixels from the top, so the cursor is within the table body.< / em >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
2013-04-08 05:40:39 +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-05-16 15:25:14 +00:00
< button type = "button" > Toggle< / button > scroller_jumpToHeader : < span id = "case" > true< / span > (see the note above)< span class = "remark" > *< / span >
2015-01-14 19:19:02 +00:00
< p > < / p >
2013-04-08 05:40:39 +00:00
< table class = "tablesorter" >
< thead >
2014-06-18 19:37:24 +00:00
< tr >
< th class = "name" > Name< / th >
< th class = "major" > Major< / th > < th > Sex< / th >
< th class = "english" > English< / th >
< th class = "japanese" > Japanese< / th >
< th class = "calculus" > Calculus< / th >
< th class = "geometry filter-false sorter-false" > Geometry< / th >
< / tr >
2013-04-08 05:40:39 +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 >
< / body >
< / html >
