Minimal Content Paginator With jQuery - PaginateIt
| File Size: | 5.97 KB |
|---|---|
| Views Total: | 1021 |
| 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.











