Hello, this is bootpag - dynamic pagination jQuery plugin.

Works well with Bootstrap or standalone.

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({...})

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}})
firstLastUse do we ant first and last (default true<)/li>
first name of first (default 'FIRST')
last name of last (default 'LAST')
wrapClass css class for wrap (default 'pagination')
activeClass css class for active (default 'active')
disabledClass css class for disabled (default 'disabled')
nextClass css class for next (default 'next')
prevClass css class for prev (default 'prev')
lastClass css class for last (default 'last')
firstClass css class for first (default 'first')

Events available on bootpag object

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

Simple example

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

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

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

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

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

Full example

Use all options available
Init two bootpags for same content

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