Minimal Content Paginator With jQuery - PaginateIt
File Size: | 5.97 KB |
---|---|
Views Total: | 998 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PaginateIt is the simplest jQuery pagination plugin for long web content I found on the web.
The plugin dynamically generates basic pagination controls to navigate between paginated content by clicking on the next
& prev
buttons.
How to use it:
1. Download and insert the main JavaScript file paginateIt.js
after jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="paginateIt.js"></script>
2. Specify the number of items to display per page using the paginate
attribute as these:
<div id="example" paginate="3"> <div class="item"> Item 1 </div> <div class="item"> Item 2 </div> <div class="item"> Item 3 </div> <div class="item"> Item 4 </div> <div class="item"> Item 5 </div> ... </div>
3. That's it. The plugin will automatically generate the pagination controls under the long content. All possible CSS classes:
var classNames = { disabled: "disabled", paginator: "paginator", paginatorPrev: "paginator-prev", paginatorNext: "paginator-next" };
4. Override the default styles of the pagination controls.
.disabled { /* styles here */ } .paginator{ /* styles here */ } .paginator-prev{ /* styles here */ } .paginator-next{ /* styles here */ }
This awesome jQuery plugin is developed by tonysamperi. For more Advanced Usages, please check the demo page or visit the official website.