The List.js Paging Plugin

The List.js paging plugin is bundled with the script and is located in /plugins/paging/list.paging.js and click here if you want to see it in action. To use the plugin just include the .js file at your page and do like this:

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

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

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

And the paging that gets created looks kinda like this:

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

There are som options available thought.

name (String, default: “paging”)
Default option for all plugins. Defines how to access the plugin from the list object listObj.pluginName.
pagingClass (String, default: “paging”)
The class that defines which ul that should contain the paging (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 paging.
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).

Two pagings

<div id="listId">
  <ul class="pagingTop"></ul>
  <ul class="list">
      /* A bunch of items */
  </ul>
  <ul class="pagingBottom"></ul>
</div>

<script>
var pagingTopOptions = {
  name: "pagingTop",
  pagingClass: "pagingTop",
  outerWindow: 2
};
var pagingBottomOptions = {
  name: "pagingBottom",
  pagingClass: "pagingBottom",
  innerWindow: 3,
  left: 2,
  right: 4
};
var listOptions = {
  valueNames: [ 'name', 'category' ],
  page: 3,
  plugins: [
      [ 'paging', pagingTopOptions],
      [ 'paging', pagingBottomOptions]
  ]
};

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

Jonny Strömberg

@javve Follow @javve

The List.js Paging Plugin Jan 26th, 2012

Two pagings

About the author and discussions