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