Easy Client-side Pagination Plugin with jQuery - Paginate.js
File Size: | 7.17 KB |
---|---|
Views Total: | 5350 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Paginate.js is a lightweight and easy-to-use jQuery client-side pagination plugin that allows you to paginate through a large set of html content.
How to use it:
1. Load the jquery.paginate.css
in the head
section of the html document. You can find all default CSS styles of the pagination plugin in this CSS file.
<link rel="stylesheet" href="jquery.paginate.css">
2. The sample Html. In this case, we're going to use the Paginate.js plugin to handle the pagination for elements inside a list.
<ul id="example"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> ... <li> Item n </li> </ul>
3. Load jQuery library and the jquery.paginate.js
at the end of the html document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jquery.paginate.js"></script>
4. The JavaScript to generate a default pagination for your list.
$('#example').paginate();
5. Customize the pagination plugin with the following options.
$('#example').paginate({ // how many items per page perPage: 5, // scroll to top of the container if an user clicks on a pagination link autoScroll: true, // which elements to target scope: '', // where the pagination will be displayed paginatePosition: ['bottom'], // custom html tags for the pagination containerTag: 'nav', paginationTag: 'ul', itemTag: 'li', linkTag: 'a', // use hash locations useHashLocation: true, // triggered when a pagination link is clicked onPageClick: function() {} });
This awesome jQuery plugin is developed by bzzrckt. For more Advanced Usages, please check the demo page or visit the official website.