NOTE!
- In v2.28.4, added
data-pager-outputanddata-pager-output-filteredattributes which override theoutputoption when set on thepageDisplayelement. - In v2.26.0, a page size of "all" instead of a specific number will be saved and used on reload. Also, ajax interaction will pass a size of "all" which may break current server methods on number of pages to return.
- In v2.25.4, updated example to use
applyWidgetIdto re-apply the pager widget after being destroyed. - In v2.24.0, a page size select option with a value of "all" will display all rows - not recommended for ajax interactions!
- In v2.19.0, added
pageAndSizemethod which allows setting both the pager page & size. - In v2.17.6, added
{startRow:input}and{page:input}variables to theoutputoption. - This pager WIDGET can not be applied to the original tablesorter.
- Do not use this widget along with the pager plugin.
- The pager.css file also works with this pager widget.
- This widget is still in development as it has not been throughly tested.
- Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
- All of the options are now set within the
widgetOptions. - Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return
table.configinstead oftable.config.pager. - Most option names have only been modified by adding
pager_as a prefix. - Exceptions include moving all applied css class names into a
pager_cssoption and all selectors intopager_selectors, including the originalcontaineroption. - Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.
- See the Javascript code below for a full example.
- All of the options are now set within the
Triggered Events
- Pager events will appear here.
Demo
| Name | Major | Sex | English | Japanese | Calculus | Geometry | |
|---|---|---|---|---|---|---|---|
| Name | Major | Sex | English | Japanese | Calculus | Geometry | |
| Student01 | Languages | male | 80 | 70 | 75 | 80 | |
| Student02 | Mathematics | male | 90 | 88 | 100 | 90 | |
| Student03 | Languages | female | 85 | 95 | 80 | 85 | |
| Student04 | Languages | male | 60 | 55 | 100 | 100 | |
| Student05 | Languages | female | 68 | 80 | 95 | 80 | |
| Student06 | Mathematics | male | 100 | 99 | 100 | 90 | |
| Student07 | Mathematics | male | 85 | 68 | 90 | 90 | |
| Student08 | Languages | male | 100 | 90 | 90 | 85 | |
| Student09 | Mathematics | male | 80 | 50 | 65 | 75 | |
| Student10 | Languages | male | 85 | 100 | 100 | 90 | |
| Student11 | Languages | male | 86 | 85 | 100 | 100 | |
| Student12 | Mathematics | female | 100 | 75 | 70 | 85 | |
| Student13 | Languages | female | 100 | 80 | 100 | 90 | |
| Student14 | Languages | female | 50 | 45 | 55 | 90 | |
| Student15 | Languages | male | 95 | 35 | 100 | 90 | |
| Student16 | Languages | female | 100 | 50 | 30 | 70 | |
| Student17 | Languages | female | 80 | 100 | 55 | 65 | |
| Student18 | Mathematics | male | 30 | 49 | 55 | 75 | |
| Student19 | Languages | male | 68 | 90 | 88 | 70 | |
| Student20 | Mathematics | male | 40 | 45 | 40 | 80 | |
| Student21 | Languages | male | 50 | 45 | 100 | 100 | |
| Student22 | Mathematics | male | 100 | 99 | 100 | 90 | |
| Student23 | Mathematics | male | 82 | 77 | 0 | 79 | |
| Student24 | Languages | female | 100 | 91 | 13 | 82 | |
| Student25 | Mathematics | male | 22 | 96 | 82 | 53 | |
| Student26 | Languages | female | 37 | 29 | 56 | 59 | |
| Student27 | Mathematics | male | 86 | 82 | 69 | 23 | |
| Student28 | Languages | female | 44 | 25 | 43 | 1 | |
| Student29 | Mathematics | male | 77 | 47 | 22 | 38 | |
| Student30 | Languages | female | 19 | 35 | 23 | 10 | |
| Student31 | Mathematics | male | 90 | 27 | 17 | 50 | |
| Student32 | Languages | female | 60 | 75 | 33 | 38 | |
| Student33 | Mathematics | male | 4 | 31 | 37 | 15 | |
| Student34 | Languages | female | 77 | 97 | 81 | 44 | |
| Student35 | Mathematics | male | 5 | 81 | 51 | 95 | |
| Student36 | Languages | female | 70 | 61 | 70 | 94 | |
| Student37 | Mathematics | male | 60 | 3 | 61 | 84 | |
| Student38 | Languages | female | 63 | 39 | 0 | 11 | |
| Student39 | Mathematics | male | 50 | 46 | 32 | 38 | |
| Student40 | Languages | female | 51 | 75 | 25 | 3 | |
| Student41 | Mathematics | male | 43 | 34 | 28 | 78 | |
| Student42 | Languages | female | 11 | 89 | 60 | 95 | |
| Student43 | Mathematics | male | 48 | 92 | 18 | 88 | |
| Student44 | Languages | female | 82 | 2 | 59 | 73 | |
| Student45 | Mathematics | male | 91 | 73 | 37 | 39 | |
| Student46 | Languages | female | 4 | 8 | 12 | 10 | |
| Student47 | Mathematics | male | 89 | 10 | 6 | 11 | |
| Student48 | Languages | female | 90 | 32 | 21 | 18 | |
| Student49 | Mathematics | male | 42 | 49 | 49 | 72 | |
| Student50 | Languages | female | 56 | 37 | 67 | 54 |
Javascript
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"/>
<!-- the "pagedisplay" can be any element, including an input -->
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} – {endRow} / {filteredRows} of {totalRows} total rows"></span>
<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>
<option value="all">All Rows</option>
</select>
</form>
</div>
Pager Change Log
- Moved to wiki pages.