// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 25,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
});
});</script>
</head>
<bodyid="pager-demo">
<divid="banner">
<h1>table<em>sorter</em></h1>
<h2>Pager plugin - Ajax</h2>
<h3>Flexible client-side table sorting</h3>
<ahref="index.html">Back to documentation</a>
</div>
<divid="main">
<pclass="tip">
<em>NOTE!</em>:
<ul>
<li>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.</li>
<li>The <codeclass="hilight">ajaxUrl</code> and <codeclass="hilight">ajaxProcessing</code> function are both required options for this interaction to work properly.</li>
<li>The <codeclass="hilight">ajaxUrl</code> contains a replaceable string to sent the requested page (<codeclass="hilight">{page}</code>) and block size (<code>{size}</code>).</li>
<li>The <codeclass="hilight">ajaxProcessing</code> function must* return the data in the following format <codeclass="hilight">[ total, rows, headers ]</code> - <spanclass="tip"><em>Modified</em></span> in 2.1.3:
<preclass="js"><code>[
// 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
<li>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.</li>
<li>Limitations of this demo:
<ul>
<li>This demo will not work in Chrome due to restrictions with browser and desktop interaction.</li>
<li>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.</li>
</ul>
</li>
</ul>
<pclass="small">* If you have a different JSON format and need help with the processing code, please ask the question on <ahref="http://stackoverflow.com">StackOverflow</a> or message me directly (gmail; wowmotty). Please don't open an issue for help with code.</p>
