NOTE!:
- This update to the pager plugin that interacts with a database via ajax was added in version 2.0.32 and can be applied to the original tablesorter.
- The
ajaxUrlandajaxProcessingfunction are both required options for this interaction to work properly. - The
ajaxUrlcontains a replaceable string to sent the requested page ({page}) and block size ({size}). - The
ajaxProcessingfunction must* return the data in the following format[ total, rows, headers ]- Modified in 2.1.3:[ // total # rows contained in the database 100, // row data: array of arrays; each internal array has the table cell data for that row [ [ "row1cell1", "row1cell2", ... "row1cellN" ], // first row [ "row2cell1", "row2cell2", ... "row2cellN" ], // second row ... [ "rowNcell1", "rowNcell2", ... "rowNcellN" ] // last row ], // header text (optional) [ "Header1", "Header2", ... "HeaderN" ] ] - The table header and footer text will be updated to match the JSON "header column #" text; but there is an issue with the table rendering improperly if the number of columns in the HTML and the number of columns in the JSON don't match.
- Limitations of this demo:
- This demo will not work in Chrome due to restrictions with browser and desktop interaction.
- The record size is limited to 25 records because this demo is not interacting with an actual database, but with four JSON files containing 25 records each.
* If you have a different JSON format and need help with the processing code, please ask the question on StackOverflow or message me directly (gmail; wowmotty). Please don't open an issue for help with code.
Demo
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
Javascript
CSS
div.tablesorterPager {
padding: 10px 0 10px 0;
background-color: #D6D2C2;
text-align: center;
}
div.tablesorterPager span {
padding: 0 5px 0 5px;
}
div.tablesorterPager input.prev {
width: auto;
margin-right: 10px;
}
div.tablesorterPager input.next {
width: auto;
margin-left: 10px;
}
div.tablesorterPager input {
font-size: 8px;
width: 50px;
border: 1px solid #330000;
text-align: center;
}
#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
<!-- pager -->
<div class="pager">
<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 selected="selected" value="25">25</option>
</select>
</div>
<table class="tablesorter">
<thead>
<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>
</tfoot>
<tbody> <!-- tbody will be loaded via JSON -->
</tbody>
</table>
<div class="pager">
<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 selected="selected" value="25">25</option>
</select>
</div>