2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
< html >
2011-06-22 23:19:27 +00:00
< head >
2011-07-17 15:01:18 +00:00
< meta charset = "utf-8" >
2011-06-22 23:19:27 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Pager plugin< / title >
<!-- jQuery -->
2011-07-17 15:01:18 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > < / script >
2011-06-22 23:19:27 +00:00
<!-- Demo stuff -->
2011-07-17 15:01:18 +00:00
< 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-06-22 23:19:27 +00:00
<!-- Tablesorter: required -->
2011-07-17 15:01:18 +00:00
< link rel = "stylesheet" href = "../css/blue/style.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
2011-06-22 23:19:27 +00:00
<!-- Tablesorter: optional -->
2011-07-27 06:14:20 +00:00
< script src = "../addons/pager/jquery.tablesorter.pager.js" > < / script >
< style id = "css" > / * * * c s s u s e d w h e n " u p d a t e A r r o w s " o p t i o n i s t r u e * * * /
/* the pager itself gets a disabled class when the number of rows is less than the size */
#pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
#pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}< / style >
2011-06-22 23:19:27 +00:00
2011-07-17 15:01:18 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2011-06-22 23:19:27 +00:00
2011-09-13 22:55:31 +00:00
var pagerOptions = {
// target the pager markup
container: $("#pager"),
// output default: '{page}/{totalPages}'
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible
updateArrows: true,
// do not absolutely position the pager
positionFixed: false
};
2011-06-22 23:19:27 +00:00
$("table")
.tablesorter({
widthFixed: true,
widgets: ['zebra']
})
2011-07-17 15:01:18 +00:00
// initialize the pager plugin
2011-09-13 22:55:31 +00:00
.tablesorterPager(pagerOptions)
2011-07-17 15:01:18 +00:00
// bind to pager events
.bind('pagerChange pagerComplete', function(e,c){
var msg = '" event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page ' + (c.page + 1) + '/' + c.totalPages;
$('#display')
.append('< li > "' + e.type + msg + '< / li > ')
.find('li:first').remove();
2011-06-22 23:19:27 +00:00
});
2011-07-17 15:01:18 +00:00
2011-09-08 16:28:10 +00:00
// Add two new rows using the "addRows" method
// the "update" method doesn't work here because not all
// rows are present in the table when the pager is applied
$('button:contains(Add)').click(function(){
// add two rows
var row = '< tr > < td > StudentXX< / td > < td > Mathematics< / td > < td > male< / td > < td > 33< / td > < td > 39< / td > < td > 54< / td > < td > 73< / td > < / tr > ' +
'< tr > < td > StudentYY< / td > < td > Mathematics< / td > < td > female< / td > < td > 83< / td > < td > 89< / td > < td > 84< / td > < td > 83< / td > < / tr > ',
$row = $(row);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
});
// Destroy pager
$('button:contains(Destroy)').click(function(){
$('table').trigger('destroy.pager');
2011-09-13 22:55:31 +00:00
// fancy disable/enable buttons - not really needed
$('button:contains(Restore)').removeAttr('disabled');
$(this).attr('disabled', true);
});
// Restore pager
$('button:contains(Restore)').click(function(){
// restore the pager
$('table').tablesorterPager(pagerOptions);
// fancy disable/enable buttons - not really needed
$(this).attr('disabled', true);
$('button:contains(Destroy)').removeAttr('disabled');
2011-09-08 16:28:10 +00:00
});
2011-07-17 15:01:18 +00:00
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Pager plugin< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2011-09-08 16:28:10 +00:00
< p class = "tip" >
2011-09-11 17:51:02 +00:00
< em > NOTE!< / em > The following are not part of the original plugin:
< ul >
< li > Added "pagerChange" and "pagerComplete" events in version 2.0.7.< / li >
< li > Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)") to version 2.0.9.< / li >
< li > Added "cssDisabled" and "pagerArrows" options which controls the look of the pager and arrows when the pager is on the first or last page. Added in version 2.0.9.< / li >
< li > Added a new "addRows" method to allow adding new rows while the pager is applied to a table. Using "update" would remove all non-visible rows. New in version 2.0.16.< / li >
< li > New "destroy.pager" method will reveal the entire table, remove the pager functionality, and hide the actual pager. Added in version 2.0.16.< / li >
< li > Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table (v2.0.16).< / li >
< / ul >
2011-09-08 16:28:10 +00:00
< / p >
2011-07-17 15:01:18 +00:00
< h1 > Triggered Events< / h1 >
< ul id = "display" >
< li > Pager events will appear here.< / li >
< li > < / li >
< li > < / li >
< / ul >
< h1 > Demo< / h1 >
< br >
2011-09-13 22:55:31 +00:00
< button > Add Rows< / button > < button > Destroy Pager< / button > < button disabled > Restore Pager< / button >
2011-09-08 16:28:10 +00:00
< br > < br >
2011-07-17 15:01:18 +00:00
< div id = "pager" class = "pager" >
< form >
< img src = "../addons/pager/icons/first.png" class = "first" / >
< img src = "../addons/pager/icons/prev.png" class = "prev" / >
2011-07-27 06:14:20 +00:00
< span class = "pagedisplay" > < / span > <!-- this can be any element, including an input -->
2011-07-17 15:01:18 +00:00
< img src = "../addons/pager/icons/next.png" class = "next" / >
< img src = "../addons/pager/icons/last.png" class = "last" / >
< select class = "pagesize" >
2011-07-27 06:14:20 +00:00
< option selected = "selected" value = "10" > 10< / option >
2011-07-17 15:01:18 +00:00
< option value = "20" > 20< / option >
< option value = "30" > 30< / option >
2011-09-08 16:28:10 +00:00
< option value = "40" > 40< / option >
2011-07-17 15:01:18 +00:00
< / select >
< / form >
< / div >
< table class = "tablesorter" >
2011-06-22 23:19:27 +00:00
< thead >
< 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 >
2011-09-08 16:28:10 +00:00
< 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 >
2011-06-22 23:19:27 +00:00
< / table >
2011-07-17 15:01:18 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "js" > < / pre >
< / div >
2011-07-27 06:14:20 +00:00
< h1 > CSS< / h1 >
< div id = "css" >
< pre class = "css" > < / pre >
< / div >
2011-07-17 15:01:18 +00:00
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "html" > < table class=" tablesorter" >
< !-- view page source to see the entire table -->
< /table>
< !-- pager -->
< div id=" pager" class=" pager" >
< form>
< img src=" first.png" class=" first" />
< img src=" prev.png" class=" prev" />
2011-07-27 06:14:20 +00:00
< span class=" pagedisplay" > < /span> < !-- this can be any element, including an input -->
2011-07-17 15:01:18 +00:00
< img src=" next.png" class=" next" />
< img src=" last.png" class=" last" />
< select class=" pagesize" >
< option selected=" selected" value=" 10" > 10< /option>
< option value=" 20" > 20< /option>
< option value=" 30" > 30< /option>
< option value=" 40" > 40< /option>
< /select>
< /form>
< /div> < / pre >
< / div >
< div class = "next-up" >
< hr / >
Next up: < a href = "index.html" > Back to Documentation › › < / a >
2011-06-22 23:19:27 +00:00
< / div >
< / div >
< / body >
< / html >
