NOTE! The following are not part of the original plugin:

Triggered Events

Demo




First Prev Next Last
Name Major Sex English Japanese Calculus Geometry
Name Major Sex English Japanese Calculus Geometry
Student01 Languages male 80 70 75 80
Student02 Mathematics male 90 88 100 90
Student03 Languages female 85 95 80 85
Student04 Languages male 60 55 100 100
Student05 Languages female 68 80 95 80
Student06 Mathematics male 100 99 100 90
Student07 Mathematics male 85 68 90 90
Student08 Languages male 100 90 90 85
Student09 Mathematics male 80 50 65 75
Student10 Languages male 85 100 100 90
Student11 Languages male 86 85 100 100
Student12 Mathematics female 100 75 70 85
Student13 Languages female 100 80 100 90
Student14 Languages female 50 45 55 90
Student15 Languages male 95 35 100 90
Student16 Languages female 100 50 30 70
Student17 Languages female 80 100 55 65
Student18 Mathematics male 30 49 55 75
Student19 Languages male 68 90 88 70
Student20 Mathematics male 40 45 40 80
Student21 Languages male 50 45 100 100
Student22 Mathematics male 100 99 100 90
Student23Mathematicsmale8277079
Student24Languagesfemale100911382
Student25Mathematicsmale22968253
Student26Languagesfemale37295659
Student27Mathematicsmale86826923
Student28Languagesfemale4425431
Student29Mathematicsmale77472238
Student30Languagesfemale19352310
Student31Mathematicsmale90271750
Student32Languagesfemale60753338
Student33Mathematicsmale4313715
Student34Languagesfemale77978144
Student35Mathematicsmale5815195
Student36Languagesfemale70617094
Student37Mathematicsmale6036184
Student38Languagesfemale6339011
Student39Mathematicsmale50463238
Student40Languagesfemale5175253
Student41Mathematicsmale43342878
Student42Languagesfemale11896095
Student43Mathematicsmale48921888
Student44Languagesfemale8225973
Student45Mathematicsmale91733739
Student46Languagesfemale481210
Student47Mathematicsmale8910611
Student48Languagesfemale90322118
Student49Mathematicsmale42494972
Student50Languagesfemale56376754
First Prev Next Last

Javascript


	

CSS

/* pager wrapper, div */
.tablesorter-pager {
  padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.tablesorter-pager {
  background-color: #e6eeee;
  margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.tablesorter-pager img {
  vertical-align: middle;
  margin-right: 2px;
  cursor: pointer;
}

/* pager output text */
.tablesorter-pager .pagedisplay {
  padding: 0 5px 0 5px;
  width: 50px;
  text-align: center;
}

/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
  margin: 0;
  padding: 0;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.tablesorter-pager.disabled {
  display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.tablesorter-pager .disabled {
  /* visibility: hidden */
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default;
}

HTML

<table class="tablesorter">
<!-- view page source to see the entire table -->
</table>

<!-- 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="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="40">40</option>
    </select>
  </form>
</div>

Pager Change Log

Changes

Version 2.4.2 (10/17/2012)

  • Ajax loaded tables will no longer hide pages other than the first. Fixes issue #151.
  • Ajax header data now properly replaces the header text.
  • The error message row is now added with the class name from the selectorRemove option.

Version 2.4 (8/19/2012)

  • The pager plugin now plays nice with the filter widget. Fixes issue #6.
  • Added cssGoto option which contains a jQuery selector pointing to a page select dropdown. Updated the pager demo with an example.
  • Updated pager addong to now work with the filter and advanced filter widgets.
  • Added {filteredRows} and {filteredPages} parameters to the output option. They contain the number of rows and pages that result from the filter widget search.

Version 2.2.1 (5/4/2012)

  • Widgets should now apply properly while the pager is active. Fix for issue #60.

Version 2.1.20 (4/28/2012)

  • Optimized pager table rebuilding to also use document fragments, and by removing two extra calls that reapplied the current widgets.

Version 2.1.6 (3/22/2012)

  • Updated pager css. It wasn't targeting the pager block correctly.
  • Moved pager into the thead and/or tfoot in the pager ajax demo.
  • The pager plugin ajax method should now only target the header column text (not the pager) and first footer row when updating the header text.

Version 2.1.3.1 (3/17/2012)

  • Rozwell contributed some bug fixes that occur when cssPageSize is not set. Thanks for sharing!

Version 2.1

  • Ajax:
    • The pager plugin will now interact with a database via JSON. See demo here.
    • Added ajaxUrl option which contains the variables {page} and {size} which will be replaced by the plugin to obtain that data.
      ajaxUrl : "http:/mydatabase.com?page={page}&size={size}"
    • Another option named ajaxProcessing was included to process the data before returning it to the pager plugin. Basically the JSON needs to contain the data to match the example below. An additional required variable is the total number of records or rows needs to be returned.
      // process ajax so that the data object is returned along with the total number of rows
      									// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
      									ajaxProcessing: function(ajax){
      									if (ajax && ajax.hasOwnProperty('data')) {
      									// return [ "data", "total_rows" ];
      									return [ ajax.data, ajax.total_rows ];
      									}
      								}
    • I tried to make the plugin interact with a database as flexible as possible, but I'm sure I haven't covered every situation. So any and all feedback is welcome!
    • Also, much thanks to kachar for the enhancement request and willingness to help test it!
  • Removed positionFixed and offset options.
  • Added fixedHeight option which replaces the positionFixed and offset options.
    • If true, it should maintain the height of the table, even when viewing fewer than the set number of records (go to the last page to see this in action).
    • It works by adding an empty row to make up the differences in height.
    • There were some issues of the height being incorrect when this option is true. The problems occurred if you add/remove rows + change pager size, or just destroy/enable the pager. I think I fixed it, but if you should find a problem, please report the issue and steps on how to duplicate it.
  • The pager container option will now accept class names. So you can add multiple container blocks to control the pager, just as this page now has two, one above and one below.
  • The pager now adds all of its options to the table configuration options within an object named "pager". Basically what this means is that instead of add all of the pager options to be mixed in with the tablesorter options, the pager options have been isolated and can be found by typing this into the browser console: $('table')[0].config.pager.

Version 2.0.21.2

  • Added "disable.pager" and "enable.pager" methods added to make it easier to add or delete rows from the table.

Version 2.0.16

  • Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table.
  • Added "destroy.pager" method will reveal the entire table, remove the pager functionality, and hide the actual pager.
  • Added a new addRows method to allow adding new rows while the pager is applied to a table. Using "update" would remove all non-visible rows.

Version 2.0.9

  • Added cssDisabled and pagerArrows options which controls the look of the pager and arrows when the pager is on the first or last page.
  • Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)").

Version 2.0.7

  • Added "pagerChange" and "pagerComplete" events in version 2.0.7.

Next up: Pager plugin - Ajax ››