Easy Flexible Pagination Component For jQuery - Folio.js

File Size: 22.5 KB
Views Total: 2934
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy Flexible Pagination Component For jQuery - Folio.js

Folio.js is a simple, flexible, cross-browser pagination plugin for jQuery that dynamically renders a fully configurable pagination component for your long web content.

Key features:

  • Allows to set the max/total/current pages.
  • Custom previous/next button styles.
  • Auto jumps to the first page when you reach the last one.
  • Allows to link the pagination to another one.

Basic usage:

1. Add jQuery library together with the jQuery Folio.js plugin's JavaScript and CSS to the webpage.

<link rel="stylesheet" href="Folio.min.css">
<script src="//code.jquery.com/jquer.min.js"></script>
<script src="Folio.min.js"></script>

2. Generate a basic pagination component using JavaScript:

<div id="demo" class="Pagination"></div>
$('#PaginationOneTop').Folio()

3. Or via HTML data attributes:

<div id="demo" 
     class="Pagination"
     data-Folio
     data-total-pages="100"
     data-max-pages="9"
     data-active-page="99"
     data-previous-class="glyphicon glyphicon-chevron-left"
     data-next-class="glyphicon glyphicon-chevron-right"
     data-infinite-scrolling="true">
</div>

4. All default options which can be passed via either JavaScript or data-OPTION attributes:

$('#PaginationOneTop').Folio({
  useHTMLOptions: true,
  infiniteScrolling: false,
  totalPages: 0,
  maxPages: 9,
  activePage: 1,
  nextClass: '',
  previousClass: '',
  onUpdate: $.noop,
  disableInitialOnUpdate: false
})

5. The method to create a new Object from the defaults and extends it with the options Object provided.

// @param {Object} options - Object of the options to be extended from the defaults.
// @return {Folio} - Returns the Folio object to maintain chaining.
.setOptions(options)

6. The method to updates the .FolioPages page numbering corresponding to the current activePage. No new element is created and only the numbers(text) of the existing page number elements is updated using the cached .FolioPages .FolioPage jQuery object array i.e., this.$pageArray. Also updates(Either removes or adds the .Disabled class based on the condition.) the next and previous buttons .Disabled class. Note: It also calls the this.properties.onUpdate() function automatically.

// @param {boolean} [disableOnUpdate] - If true then onUpdate is not called. Default is false.
// @param {boolean} [disableSync] - If true then synchronisation is not done i.e., setActivePage(activePage) is not called for the linked Folio objects. Default is false.
// @return {Folio} - Returns the Folio object to maintain chaining.
.update()

7. The method to set the Active Page of the pagination to the given page number and also calls update() function automatically.

// @param {int} page - Page Number to set the Active Page to.
// @param {boolean} [disableOnUpdate] - If true then onUpdate is not called. Default is false.
// @param {boolean} [disableSync] - If true then synchronisation is not done i.e., setActivePage(page) is not called for the linked Folio objects. Default is false.
// @return {Folio} - Returns the Folio object to maintain chaining.
.setActivePage()

8. The method to increment the active page number. If this.properties.infiniteScrolling is enabled it jumps to 1st page if called when the active page is the last page.

// @return {Folio} - Returns the Folio object to maintain chaining.
.nextPage()

9. The method to decrement the active page number. If this.properties.infiniteScrolling is enabled it jumps to last page page if called when the active page is the 1st page.

// @return {Folio} - Returns the Folio object to maintain chaining.
.previousPage()

10. The method to link the Folio object to the one passed as a parameter. Both the Folios should have equal number of pages. But the max pages can be different. The onUpdate function for all the Folio objects being linked are set to the onUpdate function of this Folio object (one being linked to).

// @param {Folio} folio - Folio object to link this one with.
// @param {boolean} [disableBackLinking] - If true then setActivePage(activePage) and link(this) is not called for the linking Folio object. Default is false.
// @return {Folio} - Returns the Folio object to maintain chaining.
.link()

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