Any Content Pagination Plugin For jQuery - paginga

paginga is a lightweight yet fully configurable jQuery pagination plugin which allows to paginate any block elements with custom pagination controls in the webpage.

How to use it:

1. Supposed that you have a list of items to paginate as this:

<div class="items">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
  ...
</div>

2. Add pagination controls to the DIV list.

<div class="pager">
  <div class="firstPage">&laquo;</div>
  <div class="previousPage">&lsaquo;</div>
  <div class="pageNumbers"></div>
  <div class="nextPage">&rsaquo;</div>
  <div class="lastPage">&raquo;</div>
</div>

3. Wrap them into a DIV container with the CSS class of 'pagination'.

<div class="paginate">
  <div class="items">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
  <div class="pager">
    <div class="firstPage">&laquo;</div>
    <div class="previousPage">&lsaquo;</div>
    <div class="pageNumbers"></div>
    <div class="nextPage">&rsaquo;</div>
    <div class="lastPage">&raquo;</div>
  </div>
</div>

4. Call the function on the top container to initialize the plugin with default options.

$(".paginate").paginga();

5. Set the initial page.

$(".paginate").paginga({
  page: 2
});

6. Disable 'Scroll to top'.

$(".paginate").paginga({
  scrollToTop: false
});

7. All configuration options with default values.

// how many items per page
itemsPerPage: 3,

// item container selector
itemsContainer: ".items",

// item selector
item: "> div",

// initial page
page: 1,

// CSS selectors
nextPage: ".nextPage",
previousPage: ".previousPage", 
firstPage: ".firstPage",
lastPage: ".lastPage",
pageNumbers: ".pageNumbers",
currentPageClass: "active",
pager: ".pager",

// If set to an integer the maximum of visible pages in the .pageNumbers element is equal to this setting.
maxPageNumbers: false,

// auto hide if there is only one page.
autoHidePager: true,

// scroll to top
scrollToTop: {
  offset: 15,
  speed: 100,
},

// enable history
history: false,
historyHashPrefix: "page-"

Change log:

2017-01-11

• Fix for issue with jQuery 3

2016-10-15

• enable back button

---

This awesome jQuery plugin is developed by mrk-j. For more Advanced Usages, please check the demo page or visit the official website.