Pagination

Note: The pagination plugin is deprecated since v1.5.0, it's now bundled into List.js. Read the old docs here.

Basic example

<div id="listId">
  <ul class="list">
      // A bunch of items
  </ul>
  <ul class="pagination"></ul>
</div>

<script>
  var options = {
    valueNames: [ 'name', 'category' ],
    page: 3,
    pagination: true
  };

  var listObj = new List('listId', options);
</script>

Options

• paginationClass String, default: “pagination”
  The class that defines which ul that should contain the pagination (must be inside the list container)
• innerWindow Int, default: 2
  How many pages should be visible on each side of the current page.
  innerWindow: 2 … 3 4 5 6 7 …
innerWindow: 1 … 4 5 6 …
• outerWindow Int, default: 0
  How many pages should be visible on from the beginning and from the end of the pagination.
  outerWindow: 0 … 3 4 5 6 7…
outerWindow: 2 1 2 … 4 5 6 7 8 … 11 12
• left Int, default: 0
  Same as outerWindow but only from left. outerWindow: 2 and left: 1 1 … 4 5 6 7 8 … 11 12
• right Int, default: 0
  Same as left but from right.
• item String, default <li><a class='page' href='#'></a></li>
  Template for the pagination items.

Notice

The number of items at each page are decided by the List.js own property page. To set this just add page: Number to the option object sent into the List.js constructor (as been done in both of the examples at this page).

Generated output

<div id="listId">
  <ul class="list">
      / A bunch of items /
  </ul>
  <ul class="pagination">
    <li>
      <a class="page active" href="javascript:function Z(){Z=""}Z()">1</a>
    </li>
    <li>
      <a class="page" href="javascript:function Z(){Z=""}Z()">2</a>
    </li>
    <li>
      …
    </li>
  </ul>
</div>

Double pagination

<div id="listId">
  <ul class="paginationTop"></ul>
  <ul class="list">
    // A bunch of items
  </ul>
  <ul class="paginationBottom"></ul>
</div>

<script>
  var listOptions = {
    valueNames: [ 'name', 'category' ],
    page: 3,
    pagination: [{
      name: "paginationTop",
      paginationClass: "paginationTop",
      outerWindow: 2
    }, {
      paginationClass: "paginationBottom",
      innerWindow: 3,
      left: 2,
      right: 4
    }]
  };

  var listObj = new List('listId', listOptions);
</script>