--- layout: default title: Pagination ---

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

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>
Next topic: Fuzzy search plugin ›