Pagination plugin

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

To use the plugin you first need to download it:

Via GitHub

Download List.pagination.js

Via Bower

bower install list.pagination.js

Via CDNJS

<script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>

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,
    plugins: [
      ListPagination({})
    ]
  };

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

Options

• name String, default: “pagination”
  Default option for all plugins. Defines how to access the plugin from the list object listObj.pluginName.
• 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.

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 paginationTopOptions = {
    name: "paginationTop",
    paginationClass: "paginationTop",
    outerWindow: 2
  };
  var paginationBottomOptions = {
    name: "paginationBottom",
    paginationClass: "paginationBottom",
    innerWindow: 3,
    left: 2,
    right: 4
  };
  var listOptions = {
    valueNames: [ 'name', 'category' ],
    page: 3,
    plugins: [
        ListPagination(paginationTopOptions),
        ListPagination(paginationBottomOptions)
    ]
  };

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