 |
| Simple Pagination System Full Featured With Plugin jQuery |
Pagination.js is a simple, full-featured jQuery based simple pagination system that is powerful, highly customizable and can be styled for your long content to increase the readability of web pages.
Features:
- Supports local data or remote data via Ajax request.
- Customizable pagination text and numbers.
- Fully styleable via CSS.
- Tons of options/methods/events to meet your actual needs.
Installation:
# NPM $ npm install paginationjs --save # Bower $ bower install paginationjs --save
How to use it:
1. Load jQuery library and the jQuery Pagination.js script in your document.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/pagination-with-styles.js"></script>
2. Call the function and set the data source.
$('#demo').pagination({
dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
callback: function(data, pagination){
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
3. Configurations.
$('#demo').pagination({
// Data source
// Array | String | Function | Object
dataSource: '',
// String | Function
locator: 'data',
// Total entries, must be specified when the pagination is asynchronous
totalNumber: 1,
// Default page
pageNumber: 1,
// entries of per page
pageSize: 10,
// Page range (pages on both sides of the current page)
pageRange: 2,
// Whether to display the 'Previous' button
showPrevious: true,
// Whether to display the 'Next' button
showNext: true,
// Whether to display the page buttons
showPageNumbers: true,
showNavigator: false,
// Whether to display the 'Go' input
showGoInput: false,
// Whether to display the 'Go' button
showGoButton: false,
// Page link
pageLink: '',
// 'Previous' text
prevText: '«',
// 'Next' text
nextText: '»',
// Ellipsis text
ellipsisText: '...',
// 'Go' button text
goButtonText: 'Go',
// Additional className for Pagination element
//className: '',
classPrefix: 'paginationjs',
// Default active class
activeClassName: 'active',
// Default disable class
disableClassName: 'disabled',
//ulClassName: '',
// Whether to insert inline style
inlineStyle: true,
formatNavigator: '<%= currentPage %> / <%= totalPage %>',
formatGoInput: '<%= input %>',
formatGoButton: '<%= button %>',
// Pagination element's position in the container
position: 'bottom',
// Auto hide previous button when current page is the first page
autoHidePrevious: false,
// Auto hide next button when current page is the last page
autoHideNext: false,
//header: '',
//footer: '',
// Aliases for custom pagination parameters
//alias: {},
// Whether to trigger pagination at initialization
triggerPagingOnInit: true,
// Whether to hide pagination when less than one page
hideWhenLessThanOnePage: false,
showFirstOnEllipsisShow: true,
showLastOnEllipsisShow: true,
// Pagging callback
callback: function(){}
})
4. Public methods.
// Go to the previous page.
container.pagination('previous');
// Go to the next page.
container.pagination('next');
// Go to the custom page.
container.pagination('go', 8)
// Disable the plugin
container.pagination('disable');
// Enable the plugin
container.pagination('enable');
// Hide the pagination
container.pagination('hide');
// Destroy the plugin
container.pagination('destroy');
You can find full document on http://pagination.js.org/docs/index.html
Live Demo
See the Pen Untitled by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- paginationjs-master.zip
- Size :
- 465.93KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT