CSS Themes
"light-theme"
"dark-theme"
"compact-theme"
How To Use
Step 1: together with JQuery, include jquery.simplePagination.js in your page:
<< span>scripttype="text/javascript"src="path_to/jquery.js"></>script><< span>scripttype="text/javascript"src="path_to/jquery.simplePagination.js"></>script>
</span></span>
JQuery 1.7.2 or later is recommended. Older versions might work as well, but they are not tested.
Step 2: OPTIONAL - include the CSS file with the 3 default themes
<< span>linktype="text/css"rel="stylesheet"href="path_to/simplePagination.css"/>
</span>
If you skip this step, you will need to define your own styles or use Bootstrap.
Step 3: call the function on your pagination placeholder:
$(function(){ $(selector).pagination({items:100,itemsOnPage:10,cssStyle:'light-theme'});});
If necessary, you can specify the number of pages directly, via "pages" parameter, instead of "items" and "itemsOnPage" which are used by the plugin to automatically calculate the number of pages.
Available options
| items | Integer | Default: 1 | Total number of items that will be used to calculate the pages. |
| itemsOnPage | Integer | Default: 1 | Number of items displayed on each page. |
| pages | Integer | Optional | If specified, items and itemsOnPage will not be used to calculate the number of pages. |
| displayedPages | Integer | Default: 5 | How many page numbers should be visible while navigating. Minimum allowed: 3 (previous, current & next) |
| edges | Integer | Default: 2 | How many page numbers are visible at the beginning/ending of the pagination. |
| currentPage | Integer | Default: 1 | Which page will be selected immediately after init. |
| hrefTextPrefix | String | Default: "#page-" | A string used to build the href attribute, added before the page number. |
| hrefTextSuffix | String | Default: empty string | Another string used to build the href attribute, added after the page number. |
| prevText | String | Default: "Prev" | Text to be display on the previous button. |
| nextText | String | Default: "Next" | Text to be display on the next button. |
| labelMap | Array | Default: empty array | A collection of labels that will be used to render the pagination items, replacing the numbers. |
| ellipsePageSet | Boolean | Default: true | When this option is true, clicking on the ellipse will replace the ellipse with a number type input in which you can manually set the resulting page. |
| cssStyle | String | Default: "light-theme" | The class of the CSS theme. |
| selectOnClick | Boolean | Default: true | Set to false if you don't want to select the page immediately after click. |
| onPageClick(pageNumber, event) | Function | Optional | Function to call when a page is clicked. Page number and event are optional parameters. |
| onInit | Function | Optional | Function to call when the pagination is initialized. |
Available methods
selectPage - Select a page based on page number.
$(function(){ $(selector).pagination('selectPage',pageNumber);});
prevPage - Selects the previous page.
$(function(){ $(selector).pagination('prevPage');});
nextPage - Select the next page.
$(function(){ $(selector).pagination('nextPage');});
getPagesCount - Returns the total number of pages.
$(function(){ $(selector).pagination('getPagesCount');});
getCurrentPage - Returns the current page number.
$(function(){ $(selector).pagination('getCurrentPage');});
disable - Disables pagination functionality.
$(function(){ $(selector).pagination('disable');});
enable - Enables the pagination after it was previously disabled.
$(function(){ $(selector).pagination('enable');});
destroy - Visually destroys the pagination, any existing settings are kept.
$(function(){ $(selector).pagination('destroy');});
redraw - The pagination is drawn again using the existing settings. (useful after you have destroyed a pagination for example)
$(function(){ $(selector).pagination('redraw');});
updateItems - allows to dynamically change how many items are rendered by the pagination
$(function(){ $(selector).pagination('updateItems',100);});
updateItemsOnPage - allows to dynamically change how many items are rendered on each page
$(function(){ $(selector).pagination('updateItemsOnPage',20);});
drawPage - takes a page number as a parameter and it sets the "currentPage" value to the given page number and draws the pagination
$(function(){ $(selector).pagination('drawPage',5);});JQuery plugin ---- simplePagination.js API