jQuery pagination

Description

When you have a a large list of items (e.g. search results or news articles), you can display them grouped in pages and present navigational elements to move from one page to another. This plugin creates these navigational elements.

Usage

Include the pagination plugin script and the pagination.css file in your HTML page. In your HTML body create a container tag pair that will hold the link elements. Give it an id attribute (e.g. “News-Pagination”)

After you have loaded the contents and know how many items you want to display overall, create the pagination like this:

	// First Parameter: number of items
	// Second Parameter: options object
	$("#News-Pagination").pagination(122, {
		items_per_page:20,
		callback:loadContents
	});

This will create the navigation links inside the container. You will see the numbers 1-7, the first number is highlighted. When you click on another number, the highlighting changes and your callback function “loadContents” is called.

The plugin is highly configurable through the option parameter and all elements can be styled separately.

You can check out a demo here.
And download the source code here.