Minimal Content Paginator With jQuery - PaginateIt

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

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.