jQuery Plugin To Paginate Any Long Text Content - jPaginate
File Size: | 7.33 KB |
---|---|
Views Total: | 7919 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jPaginate is a lightweight and easy-to-style jQuery pagination plugin which enables you to paginate any long text content (lists, paragraphs, etc) on the webpage.
How to use it:
1. In this case, we're going to use Bootstrap's styles to style the pagination controls.
<link href="/path/to/bootstrap.min.css" rel="stylesheet">
2. Add the CSS class 'pagination__item' to your text wrappers as follows:
<div class="pagination__list"> <div class="pagination__item"> <p> Content 1 </p> </div> <div class="pagination__item"> <p> Content 2 </p> </div> <div class="pagination__item"> <p> Content 3 </p> </div> ... </div>
3. Place jQuery library and the jQuery jPaginate.js plugin at the bottom of the webpage.
<script src="/path/to/query.min.js"></script> <script src="jQuery.paginate.js"></script>
4. Just call the plugin on the top element and we're done.
$('.pagination__list').paginate();
5. Limit the maximum number of item to display per page.
$('.pagination__list').paginate({ items_per_page: 3 });
6. Apply your custom CSS styles to the pagination.
.pagination { ... }
7. Available options.
pagination_class: "pagination", items_per_page: 5, prev_next: true, prev_text: '«', next_text: '»'
Change log:
2017-03-09
- Fix multiple instances handling
2016-11-05
- Add option for customizing the text for the previous and next controls
This awesome jQuery plugin is developed by asirokas. For more Advanced Usages, please check the demo page or visit the official website.