Stylish jQuery Pagination Plugin - simple Pagination

Stylish jQuery Pagination Plugin - simple Pagination
File Size: 61.9KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

simple Pagination is a simple jQuery plugin for creating stylish on-page pagination for long items on your page. It comes with 3 built-in themes and supports twitter's Bootstrap.

You might also like:

How to use it:

1. Include jQuery library and jQuery simple Pagination on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.simplePagination.js"></script>

2. Include the CSS file with the 3 default themes

<link href="simplePagination.css" rel="stylesheet" type="text/css">

3. Create a container for the pagination

<div id="light-pagination" class="pagination"></div>

4. Call the plugin with options

<script>
$('#light-pagination').pagination({
items: 1,	// Total number of items that will be used to calculate the pages.
itemsOnPage: 1,	// Number of items displayed on each page.
pages:20,	// If specified, items and itemsOnPage will not be used to calculate the number of pages.
displayedPages:5, // How many page numbers should be visible while navigating. Minimum allowed: 3 (previous, current & next)
edges:2.	// How many page numbers are visible at the beginning/ending of the pagination.
currentPage: 1, // Which page will be selected immediately after init.
hrefTextPrefix: "#page-", // A string used to build the href attribute, added before the page number.
hrefTextSuffix: '', // Another string used to build the href attribute, added after the page number.
prevText: "Prev", // Text to be display on the previous button.
nextText: "Next", // Text to be display on the next button.
cssStyle: "light-theme", // The class of the CSS theme.
selectOnClick: true, //	Set to false if you don't want to select the page immediately after click.
});
</script>

This awesome jQuery plugin is developed by flaviusmatis. For more Advanced Usages, please check the demo page or visit the official website.