Created By Divya Mamgai

Folio.js

Using JavaScript

Above Folios are linked. Try changing in page in one of the above and the change will be reflected on the other one.
Note: onUpdate() is only called once.

Source Code

HTML 
<div id="PaginationOneTop" class="Pagination"></div>
<div id="MessageOne" class="Message"></div>
<div id="PaginationOneBottom" 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>
JS 
var $messageOne = $('#MessageOne', d),
    $paginationOneTop = $('#PaginationOneTop', d),
    $paginationOneBottom = $('#PaginationOneBottom', d);

$paginationOneTop.Folio({
    totalPages: 100,
    maxPages: 17,
    activePage: 1,
    previousClass: 'glyphicon glyphicon-chevron-left',
    nextClass: 'glyphicon glyphicon-chevron-right',
    onUpdate: function (page) {
        $messageOne.text('Opened Page #' + page);
    }
}).GetFolio().link($paginationOneBottom.GetFolio());

$paginationOneBottom.GetFolio().link($paginationOneTop.GetFolio());

Using HTML Attribute Options

The function name data-on-update attribute points to should be declared before the Folio.js's version of the $(function(){...}) is executed.

Source Code

HTML 
<div id="PaginationTwo" class="Pagination"
     data-Folio
     data-total-pages="50"
     data-max-pages="9"
     data-active-page="51"
     data-previous-class="glyphicon glyphicon-chevron-left"
     data-next-class="glyphicon glyphicon-chevron-right"
     data-infinite-scrolling="true"
     data-on-update="updateMessage"></div>
<div id="MessageTwo" class="Message"></div>
JS 
window.updateMessage = function (page) {
    $('#MessageTwo', d).text('Opened Page #' + page + ' {window.updateMessage()}');
};

Options

useHTMLOptions {boolean} If true HTML options are used. Default is true.
infiniteScrolling {boolean} If true the pagination scrolls back to front or vice versa. Default is false.
totalPages {int} Total number of pages in the pagination. Default is 0.
maxPages {int} Maximum number of pages to be displayed at a time. Default is 9.
activePage {int} Current page number. Default is 1.
nextClass {string} Class to be added to the next button. Default is empty.
previousClass {string} Class to be added to the previous button. Default is empty.
onUpdate {Function} Function to be called when a page is changed using the pagination. Default is $.noop.
disableInitialOnUpdate {boolean} If true then onUpdate() function is not called when the Folio object is initialized. Default is false.

Exposed API

$.Folio(defaultOptions)

Arguments {Object} defaultOptions
Action Overrides the defaults options used for every instance of Folio.

Folio.setOptions(options)

Arguments {Object} options
Action Creates a new Object from the defaults and extends it with the options Object provided.

Folio.onUpdate(callback)

Arguments {Function} callback
Action Sets the onUpdate() function to be called each time the this.update() function is called. This is just an added utility function, since same can be achieved using this.setOptions() function as used in it.
Returns {Folio}

Folio.generate()

Action Generates the HTML elements of page numbers in the .Folio .FolioPages element corresponding to the maximum elements it can have and store them in a jQuery object array (Note: DOM Elements are mapped to their jQuery objects for faster operations later on.) i.e., this.$pageArray. Initially each element is given numbering from 1 to this.properties.maxPages. Also it clears the .FolioPages elements HTML content before appending page number elements.

Note: This function should not be called many times in succession because it is very costly operation and is only automatically called during initialization.
Returns {Folio}

Folio.update(disableOnUpdate, disableSync)

Arguments {boolean} [disableOnUpdate] - If true then onUpdate is not called. Default is false.

{boolean} [disableSync] - If true then synchronisation is not done i.e., setActivePage(activePage) is not called for the linked Folio objects. Default is false.
Action 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.
Returns {Folio}

Folio.setActivePage(page, disableOnUpdate, disableSync)

Arguments {int} page - Page Number to set the activePage to.

{boolean} [disableOnUpdate] - If true then onUpdate is not called. Default is false.

{boolean} [disableSync] - If true then synchronisation is not done i.e., setActivePage(page) is not called for the linked Folio objects. Default is false.
Action Sets the activePage of the pagination to the given page number and also calls update() function automatically.
Returns {Folio}

Folio.nextPage()

Action Increments the activePage number. If this.properties.infiniteScrolling is enabled it jumps to 1st page if called when the activePage is the last page.
Returns {Folio}

Folio.nextPage()

Action Decrements the activePage number. If this.properties.infiniteScrolling is enabled it jumps to last page if called when the activePage is the 1st page.
Returns {Folio}

Folio.link(folio, disableBackLinking)

Arguments {Folio} folio - Folio object to link this one with.

{boolean} [disableBackLinking] - If true then setActivePage(activePage) and link(this) is not called for the linking Folio object. Default is false.
Action Links this Folio object to the one passed as a parameter. Both the Folio objects should have equal number of pages. But the maxPages 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).
Returns {Folio}

Folio.initialize()

Action Initializer function for the plugin.
Returns {Folio}