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 click.

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 1.

Source

$('.demo2').bootpag({
   total: 23,
   page: 1,
   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...
});

Raw example

• Init with 3 pages (no twitter bootstrap here).

Source

$('.demo4').bootpag({
    total: 3
}).on("page", function(event, num){
    $(".content4").html("Page " + num); // or some ajax content loading...
}).removeClass('pagination');