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
$("table")
.tablesorter({
widthFixed: true,
widgets: ['zebra']
})
2011-07-17 15:01:18 +00:00
// initialize the pager plugin
2011-06-22 23:19:27 +00:00
.tablesorterPager({
2011-07-27 06:14:20 +00:00
// target the pager markup
2011-07-17 15:01:18 +00:00
container: $("#pager"),
2011-07-27 06:14:20 +00:00
// 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
2011-07-17 15:01:18 +00:00
positionFixed: false
})
// 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-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" >
< em > NOTE!< / em > Updated pager functions and added output string formatting (e.g. "1 to 10 (1022)") to version 2.0.9 (it is not part of the original plugin).
< / 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-08 16:28:10 +00:00
< button > Add Rows< / button > < button > Destroy Pager< / button >
< 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 >
