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.
+
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 into pager_selectors, including the original container option.
+
See the Javascript code below for a full example of how to use this widget with ajax.
+
+
+
+
+
+
+
Demo
+Original Ajax url:
+Current Ajax url:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Javascript
+
+
+
+
+
CSS
+
+
/* pager wrapper, div */
+.pager {
+ padding: 5px;
+}
+/* pager wrapper, in thead/tfoot */
+td.pager {
+ background-color: #e6eeee;
+}
+/* pager navigation arrows */
+.pager img {
+ vertical-align: middle;
+ margin-right: 2px;
+}
+/* pager output text */
+.pager .pagedisplay {
+ font-size: 11px;
+ padding: 0 5px 0 5px;
+ width: 50px;
+ text-align: center;
+}
+
+/*** loading ajax indeterminate progress indicator ***/
+#tablesorterPagerLoading {
+ background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
+ position: absolute;
+ z-index: 1000;
+}
+
+/*** css used when "updateArrows" option is true ***/
+/* 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);
+}
+
+
+
HTML
+
+
<!-- jQuery -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.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">
+ <thead>
+ <tr>
+ <td class="pager" colspan="5">
+ <img src="../addons/pager/icons/first.png" class="first"/>
+ <img src="../addons/pager/icons/prev.png" class="prev"/>
+ <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+ <img src="../addons/pager/icons/next.png" class="next"/>
+ <img src="../addons/pager/icons/last.png" class="last"/>
+ <select class="pagesize">
+ <option value="25">25</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
+ <th>2</th>
+ <th>3</th>
+ <th>4</th>
+ <th>5</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>1</th> <!-- tfoot text will be updated at the same time as the thead -->
+ <th>2</th>
+ <th>3</th>
+ <th>4</th>
+ <th>5</th>
+ </tr>
+ <tr>
+ <td class="pager" colspan="5">
+ <img src="../addons/pager/icons/first.png" class="first"/>
+ <img src="../addons/pager/icons/prev.png" class="prev"/>
+ <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+ <img src="../addons/pager/icons/next.png" class="next"/>
+ <img src="../addons/pager/icons/last.png" class="last"/>
+ <select class="pagesize">
+ <option value="25">25</option>
+ </select>
+ </td>
+ </tr>
+ </tfoot>
+ <tbody> <!-- tbody will be loaded via JSON -->
+ </tbody>
+</table>
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 of table.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 into pager_selectors, including the original container 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.
+
+
+
+
+
+
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;
+}
+ 
+
+ 
+ 
+
+