Gilles Ruppert

a.k.a. elduderino78

jQuery List Paginator Plugin - Elpaginator

I know it’s been a while. I started about 5 posts, but haven’t finished any of them… 

Hopefully this makes up for it: as a treat for the new year, I thought a little jQuery plugin that I wrote would be handy for some people: please welcome Elpaginator!

What it does:

It looks for a ul or ol within a wrapper & adds pagination depending on the maximum number of items specified.

Features:

  • paginates if there are more items than the user specified
  • displays number of items left or pages, i.e. 1-10, 11-20, etc or 1, 2, etc
  • html of pagination is fully configurable (wrapper need to contain class of page-list!)
  • the number of the list item if ordered list is used is correct (uses start attribute that is deprecated, but there is no real alternative yet as IE6 & 7 don’t support CSS for this yet)
  • support for ul & ol
  • very lightweight (less than 200 lines WITH lots of comments)  

You can find the elpaginator script & a demo page in my svn repository.

Options

This is how you initialise the pagination:

1
$('#wrapper').elpaginator();

Possible Options are:

1
2
3
4
5
6
7
$('#wrapper').elpaginator({
  MAX: 10,  // maximum number of items per pagination
  list: 'ol',   // whether it's an ul or ol. Default: ul
  style: 'items', // other value is pages -> show 1-5 6-10, etc, or 1, 2,
  paginationHTML: '<div class="pagination"><ul class="page-list"></ul></div>', // HTML for the pagination. Is appended to the wrapper
  paginationListItemHTML: '<li><a href="#"></a></li>' // HTML for the pagination items
});

A live example of it working can also be seen on the new Top Gear site (look at the sidebar for the lap times table).