Fork me on GitHub

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

Download or fork on github

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="//code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</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

Dynamic content here.

Source

$('.demo1').bootpag({
    total: 5
}).on("page", function(event, num){
    $(".content1").html("Page " + num); // or some ajax content loading...
    
    // ... after content load -> change total to 10
    $(this).bootpag({total: 10, maxVisible: 10});

});

Advanced example

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

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

Documentation

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

Events available on bootpag object

comments powered by Disqus