bootpag - dynamic pagination jQuery plugin

Hello, this is bootpag - dynamic pagination jQuery plugin.
Works well with twitter bootstrap or standalone.

Getting started

Download plugin and include script in your html page <script type="text/javascript" src="jquery.bootpag.js"></script> then prepare empty html element which should contain pagination (bootpag will create pagination list).
After page load init bootpag with number of total pages $('.my-element').bootpag({total: 15}).
From now on you can listen for page changes $('.my-element').on("page", function(event, num){});

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.js"></script>
</head>
<body>
    <div id="content">Dynamic Content goes here</div>
    <div id="page-selection">Pagination goes here</div>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 10
        }).on("page", function(event, /* page number here */ num){
             $("#content").html("Insert content"); // some ajax content loading...
        });
    </script>
</body>
</html>

Simple example

Init with 15 pages.

Dynamic content here.

Source

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

Advanced example

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

Dynamic content here.

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

Dynamic content here.

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

Dynamic content here.

Source

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

Documentation

Parameters $(element).bootpag({...})

total number of pages
maxVisible maximum number of visible pages
page page to show on start
leaps next/prev buttons move over one page or maximum visible pages
next text (default »)
prev text (default «)
href template for pagination links (default javascript:void(0);)
hrefVariable variable name in href template for page number (default {{number}})

Events available on bootpag object

page on page click
callback params:
- event object
- num page number clicked