NOTE!
- 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_cssoption and all selectors intopager_selectors, including the originalcontaineroption. - See the Javascript code below for a full example of how to use this widget with ajax.
- All of the options are now set within the
- The "ID" column has a default filter setting of ">30" and a descending sort, but neither is applied as this demo is not connected a server (just a basic JSON file).
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="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">
<thead>
<tr>
<td class="pager sorter-false" 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>