This time I will share jQuery Plugin and tutorial about Easy Any Content Pagination Plugin – jQuery Paginate.js, hope it will help you in programming stack.
| File Size: | 7.89 KB |
|---|---|
| Views Total: | 19666 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Paginate.js is a lightweight jQuery client-side pagination plugin which enables you to paginate any group of HTML elements on the webpage.
Features:
- Allows to specify how many items per page
- Scrolls to top of the container if a user clicks on a pagination link
- Hash locations is supported as well.
How to use it:
1. Load the CSS file jquery.paginate.css in the header to style the pagination controls.
1 |
<link rel="stylesheet" href="jquery.paginate.css"> |
2. Let’s say you have a long html list like this.
01 |
<ul id="example"> |
02 |
<li> |
03 |
Item 1 |
04 |
</li> |
05 |
|
06 |
<li> |
07 |
Item 2 |
08 |
</li> |
09 |
10 |
<li> |
11 |
Item 3 |
12 |
</li> |
13 |
14 |
... |
15 |
16 |
<li> |
17 |
Item n |
18 |
</li> |
19 |
20 |
</ul> |
3. Load JQuery library and the JavaScript file jquery.paginate.js at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.paginate.js"></script> |
4. Call the Paginate plugin and we’re done.
1 |
$('#example').paginate(); |
5. Not only html lists, the plugin supports any block element containing tons of elements.
1 |
$('#example').paginate({ |
2 |
scope: $('div'), // targets all div elements |
3 |
}); |
6. All default configuration options.
01 |
$('#example').paginate({ |
02 |
03 |
// how many items per page |
04 |
perPage: 5, |
05 |
06 |
// boolean: scroll to top of the container if a user clicks on a pagination link |
07 |
autoScroll: true, |
08 |
09 |
// which elements to target |
10 |
scope: '', |
11 |
12 |
// defines where the pagination will be displayed |
13 |
paginatePosition: ['bottom'], |
14 |
15 |
// Pagination selectors |
16 |
containerTag: 'nav', |
17 |
paginationTag: 'ul', |
18 |
itemTag: 'li', |
19 |
linkTag: 'a', |
20 |
21 |
// Determines whether or not the plugin makes use of hash locations |
22 |
useHashLocation: true, |
23 |
24 |
// Triggered when a pagination link is clicked |
25 |
onPageClick: function() {} |
26 |
|
27 |
}); |
7. Public methods.
1 |
// goto page 5 |
2 |
$('#example').data('paginate').switchPage(5); |
3 |
4 |
// goto next page |
5 |
$('#example').data('paginate').switchPage('next'); |
6 |
7 |
// goto previous page |
8 |
$('#example').data('paginate').switchPage('prev'); |
This awesome jQuery plugin is developed by neighbordog. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
