tablesorter

Pager plugin - Ajax

Flexible client-side table sorting

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 ajaxUrl and ajaxProcessing function are both required options for this interaction to work properly.
• The ajaxUrl contains a replaceable string to sent the requested page ({page}) and block size ({size}).
• The ajaxProcessing function must* return the data in the following format (Note that JSON is not allowed to include comments):

  {
    "data" : [
      { "header column 1": "r1c1 text", "header column 2": "r1c2 text", ... }, // row 1 of tbody (r1c1 = row 1, column 1)
      { "header column 1": "r2c1 text", "header column 2": "r2c2 text", ... }, // row 2 of tbody
      ...
      { "header column 1": "rNc1 text", "header column 2": "rNc2 text", ... }, // row N of tbody
    ],
  
    "total_rows" : 100 // total # rows contained in the database
  } 

• 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

25

25

Javascript

CSS

HTML

<!-- pager -->
<div id="pager" class="pager">
  <form>
    <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>
  </form>
</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>