NOTE!

Triggered Events

Demo


First Prev to 10 of 50 rows Next Last
Name
Major
Sex
English
Japanese
Calculus
Geometry
Name Major Sex English Japanese Calculus Geometry
Student01Languagesmale80707580
Student02Mathematicsmale908810090
Student03Languagesfemale85958085
Student04Languagesmale6055100100
Student05Languagesfemale68809580
Student06Mathematicsmale1009910090
Student07Mathematicsmale85689090
Student08Languagesmale100909085
Student09Mathematicsmale80506575
Student10Languagesmale8510010090
Student11Languagesmale8685100100
Student12Mathematicsfemale100757085
Student13Languagesfemale1008010090
Student14Languagesfemale50455590
Student15Languagesmale953510090
Student16Languagesfemale100503070
Student17Languagesfemale801005565
Student18Mathematicsmale30495575
Student19Languagesmale68908870
Student20Mathematicsmale40454080
Student21Languagesmale5045100100
Student22Mathematicsmale1009910090
Student23Mathematicsmale8277079
Student24Languagesfemale100911382
Student25Mathematicsmale22968253
Student26Languagesfemale37295659
Student27Mathematicsmale86826923
Student28Languagesfemale4425431
Student29Mathematicsmale77472238
Student30Languagesfemale19352310
Student31Mathematicsmale90271750
Student32Languagesfemale60753338
Student33Mathematicsmale4313715
Student34Languagesfemale77978144
Student35Mathematicsmale5815195
Student36Languagesfemale70617094
Student37Mathematicsmale6036184
Student38Languagesfemale6339011
Student39Mathematicsmale50463238
Student40Languagesfemale5175253
Student41Mathematicsmale43342878
Student42Languagesfemale11896095
Student43Mathematicsmale48921888
Student44Languagesfemale8225973
Student45Mathematicsmale91733739
Student46Languagesfemale481210
Student47Mathematicsmale8910611
Student48Languagesfemale90322118
Student49Mathematicsmale42494972
Student50Languagesfemale56376754
First Prev to 10 of 50 rows Next Last

Javascript

$(function(){

$("table")

// Initialize tablesorter
// ***********************
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'pager'],

widgetOptions: {

// output default: '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
pager_output: '{startRow:input} to {endRow} of {totalRows} rows', // '{page}/{totalPages}'

// apply disabled classname to the pager arrows when the rows at either extreme is visible
pager_updateArrows: true,

// starting page of the pager (zero based index)
pager_startPage: 0,

// Number of visible rows
pager_size: 10,

// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
pager_savePages: true,

// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
pager_fixedHeight: true,

// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
pager_removeRows: false, // removing rows in larger tables speeds up the sort

// use this format: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}"
// where {page} is replaced by the page number, {size} is replaced by the number of records to show,
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol} adds
// the filterList to the url into an "fcol" array.
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
pager_ajaxUrl: null,

// modify the url after all processing has been applied
pager_customAjaxUrl: function(table, url) { return url; },

// modify the $.ajax object to allow complete control over your ajax requests
pager_ajaxObject: {
dataType: 'json'
},

// process ajax so that the following information is returned:
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
// example:
// [
// 100, // total rows
// [
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
// ...
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
// ],
// [ "header1", "header2", ... "headerN" ] // optional
// ]
pager_ajaxProcessing: function(ajax){ return [ 0, [], null ]; },

// css class names that are added
pager_css: {
container : 'tablesorter-pager', // class added to make included pager.css file work
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning); styled in theme file
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows "disabled" on first page)
},

// jQuery selectors
pager_selectors: {
container : '.pager', // target the pager markup (wrapper)
first : '.first', // go to first page arrow
prev : '.prev', // previous page arrow
next : '.next', // next page arrow
last : '.last', // go to last page arrow
gotoPage : '.gotoPage', // go to page selector - select dropdown that sets the current page
pageDisplay : '.pagedisplay', // location of where the "output" is displayed
pageSize : '.pagesize' // page size selector - select dropdown that sets the "size" option
}

}

})

// bind to pager events
// *********************
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c){
var p = c.pager, // NEW with the widget... it returns config, instead of config.pager
msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (p.page + 1) + '/' + p.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
})

// 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 ("removeRows" is false)
// ***********************************************************************
var r, $row, num = 50,
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
$('button:contains(Add)').click(function(){
// add two rows of random data!
r = row.replace(/\{[gijmr]\}/g, function(m){
return {
'{i}' : num + 1,
'{j}' : num + 2,
'{r}' : Math.round(Math.random() * 100),
'{g}' : Math.random() > 0.5 ? 'male' : 'female',
'{m}' : Math.random() > 0.5 ? 'Mathematics' : 'Languages'
}[m];
});
num = num + 2;
$row = $(r);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
return false;
});

// Delete a row
// *************
$('table').delegate('button.remove', 'click' ,function(){
var t = $('table');
// disabling the pager will restore all table rows
// t.trigger('disable.pager');
// remove chosen row
$(this).closest('tr').remove();
// restore pager
// t.trigger('enable.pager');
t.trigger('update');
return false;
});

// Destroy pager / Restore pager
// **************
$('button:contains(Destroy)').click(function(){
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
var $t = $(this);
if (/Destroy/.test( $t.text() )){
$('table')[0].config.widgets = ['zebra'];
$('table').trigger('refreshWidgets');
//.trigger('destroy.pager');
$t.text('Restore Pager');
} else {
$('table')[0].config.widgets = ['zebra', 'pager'];
$('table').trigger('applyWidgets');
$t.text('Destroy Pager');
}
return false;
});

// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});

// clear storage (page & size)
$('.clear-pager-data').click(function(){
// clears user set page & size from local storage, so on page
// reload the page & size resets to the original settings
$.tablesorter.storage( $('table'), 'tablesorter-pager', '' );
});

// go to page 1 showing 10 rows
$('.goto').click(function(){
// triggering "pageAndSize" without parameters will reset the
// pager to page 1 and the original set size (10 by default)
// $('table').trigger('pageAndSize')
$('table').trigger('pageAndSize', [1, 10]);
});

});

CSS

/* pager wrapper, div */
.tablesorter-pager {
padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.tablesorter-pager {
background-color: #e6eeee;
margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.tablesorter-pager img {
vertical-align: middle;
margin-right: 2px;
cursor: pointer;
}

/* pager output text */
.tablesorter-pager .pagedisplay {
padding: 0 5px 0 5px;
width: 50px;
text-align: center;
}

/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
margin: 0;
padding: 0;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.tablesorter-pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.tablesorter-pager .disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}

HTML

<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>

<!-- Tablesorter: pager widget -->
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
<script src="js/widget-pager.js"></script>

<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"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="next.png" class="next"/>
<img src="last.png" class="last"/>
<select class="pagesize">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>

Pager Change Log