jQuery plugin: Tablesorter 2.0 - Pager Widget

# tablesorter

## Pager Widget

### 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`.
  - Pager events (pagerChange pagerComplete pagerInitialized pageMoved) now return `table.config` instead of `table.config.pager`.
  - 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.
  - Because I stopped trying so hard to make widgets compatible with jQuery v1.2.6, this widget requires at least v1.3+.
  - See the Javascript code below for a full example.

# Triggered Events

- Pager events will appear here.

# Demo

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 |
Student23 | Mathematics | male | 82 | 77 | 0 | 79 |
Student24 | Languages | female | 100 | 91 | 13 | 82 |
Student25 | Mathematics | male | 22 | 96 | 82 | 53 |
Student26 | Languages | female | 37 | 29 | 56 | 59 |
Student27 | Mathematics | male | 86 | 82 | 69 | 23 |
Student28 | Languages | female | 44 | 25 | 43 | 1 |
Student29 | Mathematics | male | 77 | 47 | 22 | 38 |
Student30 | Languages | female | 19 | 35 | 23 | 10 |
Student31 | Mathematics | male | 90 | 27 | 17 | 50 |
Student32 | Languages | female | 60 | 75 | 33 | 38 |
Student33 | Mathematics | male | 4 | 31 | 37 | 15 |
Student34 | Languages | female | 77 | 97 | 81 | 44 |
Student35 | Mathematics | male | 5 | 81 | 51 | 95 |
Student36 | Languages | female | 70 | 61 | 70 | 94 |
Student37 | Mathematics | male | 60 | 3 | 61 | 84 |
Student38 | Languages | female | 63 | 39 | 0 | 11 |
Student39 | Mathematics | male | 50 | 46 | 32 | 38 |
Student40 | Languages | female | 51 | 75 | 25 | 3 |
Student41 | Mathematics | male | 43 | 34 | 28 | 78 |
Student42 | Languages | female | 11 | 89 | 60 | 95 |
Student43 | Mathematics | male | 48 | 92 | 18 | 88 |
Student44 | Languages | female | 82 | 2 | 59 | 73 |
Student45 | Mathematics | male | 91 | 73 | 37 | 39 |
Student46 | Languages | female | 4 | 8 | 12 | 10 |
Student47 | Mathematics | male | 89 | 10 | 6 | 11 |
Student48 | Languages | female | 90 | 32 | 21 | 18 |
Student49 | Mathematics | male | 42 | 49 | 49 | 72 |
Student50 | Languages | female | 56 | 37 | 67 | 54 |

# 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

    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.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">
    <!-- 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

- Moved to wiki pages.