NOTE!
- 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
applyWidgetId
to 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
pageAndSize
method which allows setting both the pager page & size. - In v2.17.6, added
{startRow:input}
and{page:input}
variables to theoutput
option. - 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.config
instead 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_css
option and all selectors intopager_selectors
, including the originalcontainer
option. - 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"/> <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> <option value="all">All Rows</option> </select> </form> </div>
Pager Change Log
- Moved to wiki pages.