Hello, this is bootpag - dynamic pagination jQuery plugin

For more information see projet homepage

Simple example

• Init with 5 pages.
• Change total to 10 on page select.

Source

$('.demo1').bootpag({
    total: 5
}).on("page", function(event, num){
    $(".content").html("Page " + num); // or some ajax content loading...

    // ... after content load -> change total to 10
    $(this).bootpag({total: 10, maxVisible: 10});

});

Advanced example

• Init with 23 pages.
• Visible only 10 at once.
• Start with page 3.

Source

$('.demo2').bootpag({
   total: 23,
   page: 3,
   maxVisible: 10
}).on('page', function(event, num){
    $(".content2").html("Page " + num); // or some ajax content loading...
});

Pro example

• Init with 9 pages.
• Visible only 6 at once.
• Page number 5 active.
• Prev/Next do no leap.
• Use template for hrefs: "#pro-page-{{number}}".
• Custom next text
• No prev text

Source

$('.demo3').bootpag({
   total: 9,
   page: 5,
   maxVisible: 6,
   href: "#pro-page-{{number}}",
   leaps: false,
   next: 'next',
   prev: null
}).on('page', function(event, num){
    $(".content3").html("Page " + num); // or some ajax content loading...
});

Full example

• Use all options available
• Init two bootpags for same content

Source

$('.demo4_top,.demo4_bottom').bootpag({
    total: 50,
    page: 2,
    maxVisible: 5,
    leaps: true,
    firstLastUse: true,
    first: '←',
    last: '→',
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
    nextClass: 'next',
    prevClass: 'prev',
    lastClass: 'last',
    firstClass: 'first'
}).on("page", function(event, num){
    $(".content4").html("Page " + num); // or some ajax content loading...
});