Hello, this is bootpag - dynamic pagination jQuery plugin.

Works well with Bootstrap or standalone.

Download

Installation

Download file or clone project from github:

git clone https://github.com/botmonster/jquery-bootpag.git
or install from npm:
npm install bootpag

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.1.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/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.3.4/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>

Documentation

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

Events available on bootpag object

Simple example

Dynamic content here.

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

Dynamic content here.

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

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

Full example

Dynamic content here.

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