Notes
- In v2.26.0, a page size of "all" will be passed to the server when set; Note this change may break current server methods on number of pages to return.
- In v2.13.3, 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).
- In v2.11, the pager now stores any object returned by the `ajaxProcessing` function in `table.config.pager.ajaxData` (see the ajaxProcessing section below for more details).
- In v2.10, the
ajaxProcessing
function was updated to only require a total number of rows to be returned, also instead of returning an array of table rows, you can build the table yourself and just return the jQuery object containing those rows. The addon triggers an update. {filterList:fcol}
was added to theajaxUrl
in version 2.6.{sortList:col}
was added to theajaxUrl
in version 2.4.5.- 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
ajaxUrl
andajaxProcessing
function are both required options for this interaction to work properly. - The
ajaxUrl
contains a replaceable string to send the requested page ({page}
), block size ({size}
) or sort order ({sortList:name}
). - 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 when viewing it locally (except in Firefox) due to communication restrictions between the browser and your desktop.
- 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.
- Sorting of columns is disabled in this demo because no table data is cached when
serverSideSorting
is enabled.Sorting of columns is enabled in this demo by setting the.serverSideSorting
option tofalse
after initialization. It only sorts the current table contents because there is no server to return sorted data - The filters will only update the "Current Ajax url" because again, we're just working with JSON files here.
* 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.
ajaxProcessing
The
So, given this custom JSON format (this is only an example):
ajaxProcessing
function is needed to convert your custom JSON format into an array usable by the pager plugin (modified in 2.1.3)So, given this custom JSON format (this is only an example):
{ "total_rows": 80, "headers" : [ "ID", "Name", "Country Code", "District", "Population" ], "rows" : [{ "ID": 1, "Name": "Kabul", "CountryCode": "AFG", "District": "Kabol", "Population": 1780000 }, { "ID": 2, "Name": "Qandahar", "CountryCode": "AFG", "District": "Qandahar", "Population": 237500 }, { ... }, { "ID": 25, "Name": "Haarlemmermeer", "CountryCode": "NLD", "District": "Noord-Holland", "Population": 110722 }] }
OBJECT returned
- In v2.11, the
ajaxProcessing
can just return the above object directly (or don't even bother setting anajaxProcessing
function). So, if an object is returned by theajaxProcessing
function, the data is stored intable.config.pager.ajaxData
:- The object should contain attributes for
total
(numeric),headers
(array) androws
(array of arrays). - A replacement
output
option can also be loaded via this method and must be included in theoutput
attribute (i.e.ajaxData.output
). - Additional attributes are also available to the output display by using the attribute key wrapped in curly brackets (e.g.
{extra}
fromajaxData.extra
). - Additional attributes can also be objects or arrays and can be accessed via the output string as
{extra:0}
(for arrays) or{extra:key}
for objects. - The page number is processed first, so it would be possible to use this string
{extra:{page}}
({page}
is a one-based index), or if you need a different value use{page+1}
(zero-based index plus any number), or{page-1}
(zero-based index minus any number). - For more details, please see issue #326.
- The object should contain attributes for
ARRAY returned
- The
ajaxProcessing
function can return the data in the following format[ total, rows, headers (optional) ]
,
or in version 2.9+[ rows, total, headers (optional) ]
,
or in v2.10, return a jQuery object within the array[ total, $rows ]
, or just[ total ]
:[ // total # rows contained in the database 80, // row data: array of arrays; each internal array has the table cell data for that row [ [ 1, "Kabul", "AFG", "Kabol", 1780000 ], // [ "row1cell1", "row1cell2", ... "row1cellN" ], [ 2, "Qandahar", "AFG", "Qandahar", 237500 ], // [ "row2cell1", "row2cell2", ... "row2cellN" ], ... [ 25, "Haarlemmermeer", "NLD", "Noord-Holland", 110722 ] // [ "rowNcell1", "rowNcell2", ... "rowNcellN" ] ], [ "ID", "Name", "Country Code", "District", "Population" ] // [ "Header1", "Header2", ... "HeaderN" ] (optional) ]
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
<table class="tablesorter"> <thead> <tr class="tablesorter-ignoreRow"> <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 data-value=">30"</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>