NOTE!

Demo

Original Ajax url:
Current Ajax url:
First Prev Next Last
1 2 3 4 5
1 2 3 4 5
First Prev Next Last

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

<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link href="css/theme.blue.css" rel="stylesheet">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>

<!-- Tablesorter: pager widget -->
<link href="css/jquery.tablesorter.pager.css" rel="stylesheet">
<script src="js/widget-pager.js"></script>

<table class="tablesorter">
  <thead>
    <tr>
      <td class="pager sorter-false" 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>

Next up: Pager plugin + filter widget ››