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
/* 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
<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>