# tablesorter

## Pager Widget - Ajax

### Flexible client-side table sorting

Back to documentation

NOTE!

- This pager WIDGET can not be applied to the original tablesorter.
- Do not use this widget along with the pager plugin.
- The pager.css file also works with this pager widget.
- This widget is still in development as it has not been throughly tested.
- Extensive documentation has not been included, as all functioning is essentially identical to the pager addon, but here are some important differences:
  - All of the options are now set within the `widgetOptions`.
  - Most option names have only been modified by adding `pager_` as a prefix.
  - Exceptions include moving all applied css class names into a `pager_css` option and all selectors into `pager_selectors`, including the original `container` option.
  - See the Javascript code below for a full example of how to use this widget with ajax.
- 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).

# 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

    <!-- 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" 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 ››