Simple & Full-featured jQuery Pagination System - Pagination.js
File Size: | 46.4 KB |
---|---|
Views Total: | 45205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Pagination.js is a robust, highly customizable & styleable, jQuery based pagination system for your long content to improve webpage readability.
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');
5. You can find full document on http://pagination.js.org/docs/index.html.
Changelog:
2023-03-16
- v2.6.0: feat: support for catching errors when rendering pagination
2023-03-13
- v2.5.1: Bugfix
2022-12-22
- v2.5.0: feat: support original response for asynchronous pagination
2022-12-12
- v2.4.2: Bugfixes
2022-12-05
- v2.4.1: fix: size changer
2022-12-01
- v2.3.0: feat: support pageClassName, prevClassName and nextClassName
2019-11-13
- v2.1.5: update
2018-09-17
- v2.1.4: update
2018-06-24
- v2.1.3: update
2018-01-21
- v2.1.2: chore: update examples & docs & dist files
2017-11-01
- v2.1.0: chore: update examples & docs & dist files
2017-03-21
- v2.0.8 Fixed: Plugin not working in strict mode due to the use of 'arguments.callee'
2015-12-06
- v2.0.7
This awesome jQuery plugin is developed by superRaytin. For more Advanced Usages, please check the demo page or visit the official website.