When I changed total number of pages to 0, nothing happened.
When I changed total number of pages to 1, the widget shows 1 page.
In both cases, the widget are supposed to disappear.
Could you please fix it in the next release? Thanks

So I tried adding a set of class rather than a single class to apply a css ruleset:

    $('.lib-page').bootpag({
      total: 7,
      page: 1,
      maxVisible: minimumPages,
      leaps: false,
      // For some reason, setting additional class breaks prev and next on next leap
      prevClass: 'unique-prev teal-green',
      nextClass: 'unique-next teal-red',
    }).on('page', function(event, num){
      $('.lib-page').parent().prepend('<p>Page ' + num + '</p>');
    })

But this ends up making the next and prev disappear and unable to go back to the first set of pages.

For example, on load I have this:

<< 1 2 3 4 >>

after 4 I get this:

5 6 7

I write this here as a message to other developers who end up doing the same as I did. Do not use multiple class on prevClass or nextClass as it breaks the pagination.

When in javascript write load ($("#content").load("ok.php?Page=" + num);),
and click on pagination, it appears twice pagination, and should be only one.

Version: 1.0.7
jquery-2.1.3

The paging controls the increased search options error， when I click on the search button to select the Collate option again， the data of page will be repeated loading times！

Here is my code：

    //数据分页显示
    $(function () {
        //加载首页
        getPageList();
    });

    //点击关键字搜索
    $('#btnSearch').on("click", function () {
        getPageList();
    });

    //按回车查询
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $("#btnSearch").click();
        }
    }
    //刷新数据
    function refreshData(queryObject) {

        //alert(queryObject.pageIndex);
        //alert(num);

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetPageList", "UserLog")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(queryObject),
            success: function (result) {
                $('#dataList').empty();
                var myTmpl = $.templates("#dataTmpl");
                var html = myTmpl.render(result);
                $("#dataList").html(html);

                $("#content").append("Test ");

                //maxVisible 最多可见的页数
                $(this).bootpag({ total: result.pageCount });
            },
            error: function (error) {
                window.location.href = "MyAccount/LogOff";
                //alert("有错误: " + error.responseText);
            }
        });

    }

    //点击搜索条件或者升序降序，当前页为1
    function getPageList() {
        var queryObject = {
            startDate: $('#startDate').val(),
            endDate: $('#endDate').val(),
            logTypeID: $('#logTypeID').val(),
            pageIndex: 1,
            pageSize: 10
        };
        //alert(queryObject.pageIndex);

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetPageList", "UserLog")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(queryObject),
            success: function (data) {
                $('#dataList').empty();
                //清除分页脚本
                $('#page-selection').empty();
                var myTmpl = $.templates("#dataTmpl");
                var html = myTmpl.render(data);
                $("#dataList").html(html);

                //如果分页数小于1则隐藏分页样式
                if (data.pageCount <= 1) {
                    $("#page-selection").css('display', 'none');
                }
                else {
                    $("#page-selection").css('display', 'block');
                }

                // init bootpag
                $('#page-selection').bootpag({
                    total: data.pageCount, //初始显示的页数
                    page: 1,//每次查询之后都从第一页开始显示
                    maxVisible: 10
                }).on("page", function (event, num) { //点击分页按钮
                    //更新当前页
                    queryObject.pageIndex = num;
                    refreshData(queryObject);
                });
            },
            error: function (error) {
                window.location.href = "MyAccount/LogOff";
                //alert("有错误: " + error.responseText);
            }
        });
    }

Hi,
Is there are angularjs compatible version of bootpag ?

I'm trying the following, http://bpaste.net/show/Dnsgy9pbPbk8bzqbb4hA/ but after the 'click' event, the 'page' event gets called (thus having two AJAX requests after each other), any idea why ? I can't initialize bootpag outside the event since I don't know the number of pages in advance, that's why I get them from an AJAX request. Is there a solution for this?

I am still having the same issue even with the update, can you check if I am doing something wrong ?

1st of all, ty very much, this plugin is awsome.

I'm using the plugin to paginate a SCRUD (Search, Create, Read, Update and Delete.) table. The problem is that page 1 link is ALWAYS disabled. I can go forward, but i can only back to page 2. To back to page 1 i need to reload and restart the search filter. I really don't know what is going on, but there's a way to keep the pagination links always enable even in current page ?

Hi, please how can I set to obtain that wen load new page window automatically scroll to the top?
Thanks

Latest version of bootpag.js is 1.0.7

while on cdn only 1.0.4 is available http://cdnjs.com/libraries/jquery-bootpag
1.0.4 has bug which doesn't apply pagination class properly and pagination list appears vertical rather than horizontal.

Hi,
First of all very nice and useful plugin, congrat!
Anyway I've a problem cause I don't know how can I reset the plugin to first page. I need this because I use pagination together with some filters on the pages, and after one filter is applied I need to move paginator to first page. Physically I've reset the dom elements to show the good page but the issue is that after filter is applied I display first page on the current paginator page.
Basic example: I'm on 3rd page on paginator, I apply one filter which hide/show some

Hello,
We have just add Bootpag to twittstrap resources list
http://www.twittstrap.com/resources/details/bootpag
Under : Components
Regards

If I have say 50 pages in my collection and want to start pagination on page 17, perhaps the user reloaded the page for example, i set up the plugin like such:

$("#products_pagination").bootpag({
  total: 50,
  page: 17,
  maxVisible: 10,
  leaps: false
}).on('page', function(event, num) {
  return console.log(num);
});

Unfortunately the pagination links that get built still start at page 1 up to page 10.

I had a quick look at it, and it would appear that you're actually hard coding this functionality in the each function at the bottom of the plug in.

If I had a bit more time I would try and fix this for you, but since I don't, I just thought I would bring this to your attention.

Other than that it's a pretty nice plugin. The source is a tad hard to read because of the way a lot of the code is condensed, but overall it's one bug away from being a really nice plugin.

Let me know if you need more info.

Hey all,

Are there any plans to supporting Bootstrap 4? Changes seem minimal to make it work.

Hi,
When we are visiting the last page from the list of visible page number it does not show automatically the next page available it shows after clicking Next button.

Another thing there should be an option for First and Last button too.

Thanks
Abani

Going through the source of this plugin I can seem to find a way to re-initialize the pagination with new settings, for example

• Dynamically change the list of items per page
• Dynamically change the start page number.

Can you provide a way to do this on the plugin.

Hi Botmonster team,

I am using your pagination. It was really good. I am using the advanced example below.

$('.demo2').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num){
$(".content2").html("Page " + num); // or some ajax content loading...
});

When I click next button it'll go to next set of pages, then if I hit back button it goes to first set of pages but it starts to go one by one page when I keep pressing back button. I want to disable the back button when I am in first set of pages as well as when I am in last set of pages.

I want to disable "go to each page by page" in every occasion and I want to go 8 set by set when I hit next button and back button.

Is it possible to do that ? will you be able to help me on this ?

Regards
Chrishan

If maxVisible=1, Next button does not work, it can't go to next page.

i want to add every li class add
page-item
and i want to add every a class
page-link

how can i do?

If adding an event after initialization "onPage" multiple onPage events are fired.

Is there a possible way to destroy the bootpag object before adding an event or changing the total pages/max visible/current page options?

Hey, maintainer(s) of botmonster/jquery-bootpag!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library botmonster/jquery-bootpag is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "botmonster/jquery-bootpag",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Using the following code triggers the onpage function-call twice when clicking a pagination link (workaround is included):

var page = 1; // global variable
$('.sbpagination').bootpag({
total: Math.ceil(numPosts / 50),
maxVisible: 3,
firstLastUse: true,
}).on("page", function(event, p){
// @xxx: bug in bootpag? - small workaround in order to avoid double requests and refresh-timeouts
if(page == p){
return;
}
page = p;
refreshShoutbox(((p-1)*50), 50); // $.post() is called inside this function which updates the content
});

I'm trying the following, http://bpaste.net/show/Dnsgy9pbPbk8bzqbb4hA/ but after the 'click' event, the 'page' event gets called (thus having two AJAX requests after each other), any idea why ? I can't initialize bootpag outside the event since I don't know the number of pages in advance, that's why I get them from an AJAX request. Is there a solution for this?

I need to dynamically update "total" value for my pagination in my webapp.
I see 2 problems about it:

• The plugin fires "page" event at the moment of an update - without any user clicking;
• The plugin fires 2 "page" events every time I click a page number.

Hello, I modified your plugin for a compatibility bootstrap 4. I share my code if you're interested.
Thank you for your great plugin

`(function($, window) {

$.fn.bootpag = function(options){

    var $owner = this,
        settings = $.extend({
                total: 0,
                page: 1,
                maxVisible: null,
                leaps: true,
                href: 'javascript:void(0);',
                hrefVariable: '{{number}}',
                next: '»',
                prev: '«',
                firstLastUse: false,
                first: '<span aria-hidden="true">&larr;</span>',
                last: '<span aria-hidden="true">&rarr;</span>',
                wrapClass: 'pagination',
                activeClass: 'active',
                disabledClass: 'disabled',
                nextClass: 'next',
                prevClass: 'prev',
                lastClass: 'last',
                firstClass: 'first'
            },
            $owner.data('settings') || {},
            options || {});

    if(settings.total <= 0)
        return this;

    if(!$.isNumeric(settings.maxVisible) && !settings.maxVisible){
        settings.maxVisible = parseInt(settings.total, 10);
    }

    $owner.data('settings', settings);

    function renderPage($bootpag, page){

        page = parseInt(page, 10);
        var lp,
            maxV = settings.maxVisible == 0 ? 1 : settings.maxVisible,
            step = settings.maxVisible == 1 ? 0 : 1,
            vis = Math.floor((page - 1) / maxV) * maxV,
            $page = $bootpag.find('li');
        settings.page = page = page < 0 ? 0 : page > settings.total ? settings.total : page;
        $page.removeClass(settings.activeClass);
        lp = page - 1 < 1 ? 1 :
            settings.leaps && page - 1 >= settings.maxVisible ?
                Math.floor((page - 1) / maxV) * maxV : page - 1;

        if(settings.firstLastUse) {
            $page
                .first()
                .toggleClass(settings.disabledClass, page === 1);
        }

        var lfirst = $page.first();
        if(settings.firstLastUse) {
            lfirst = lfirst.next();
        }

        lfirst
            .toggleClass(settings.disabledClass, page === 1)
            .attr('data-lp', lp)
            .addClass('page-item')
            .find('a').attr('href', href(lp)).addClass('page-link');

        var step = settings.maxVisible == 1 ? 0 : 1;

        lp = page + 1 > settings.total ? settings.total :
            settings.leaps && page + 1 <= settings.total - settings.maxVisible ?
                vis + settings.maxVisible + step: page + 1;

        var llast = $page.last();
        if(settings.firstLastUse) {
            llast = llast.prev();
        }

        llast
            .toggleClass(settings.disabledClass, page === settings.total)
            .attr('data-lp', lp)
            .addClass('page-item')
            .find('a').attr('href', href(lp)).addClass('page-link');

        $page
            .last()
            .toggleClass(settings.disabledClass, page === settings.total);


        var $currPage = $page.filter('[data-lp='+page+']');

        var clist = "." + [settings.nextClass,
            settings.prevClass,
            settings.firstClass,
            settings.lastClass].join(",.");
        if(!$currPage.not(clist).length){
            var d = page <= vis ? -settings.maxVisible : 0;
            $page.not(clist).each(function(index){
                lp = index + 1 + vis + d;
                $(this)
                    .attr('data-lp', lp)
                    .addClass('page-item')
                    .toggle(lp <= settings.total)
                    .find('a').html(lp).attr('href', href(lp).addClass('page-link'));
            });
            $currPage = $page.filter('[data-lp='+page+']');
        }
        $currPage.not(clist).addClass(settings.activeClass);
        $owner.data('settings', settings);
    }

    function href(c){

        return settings.href.replace(settings.hrefVariable, c);
    }

    return this.each(function(){

        var $bootpag, lp, me = $(this),
            p = ['<ul class="', settings.wrapClass, ' bootpag">'];

        if(settings.firstLastUse){
            p = p.concat(['<li data-lp="1" class="page-item ', settings.firstClass,
                '"><a class="page-link" href="', href(1), '">', settings.first, '</a></li>']);
        }
        if(settings.prev){
            p = p.concat(['<li data-lp="1" class="page-item ', settings.prevClass,
                '"><a class="page-link" href="', href(1), '">', settings.prev, '</a></li>']);
        }
        for(var c = 1; c <= Math.min(settings.total, settings.maxVisible); c++){
            p = p.concat(['<li class="page-item" data-lp="', c, '"><a class="page-link" href="', href(c), '">', c, '</a></li>']);
        }
        if(settings.next){
            lp = settings.leaps && settings.total > settings.maxVisible
                ? Math.min(settings.maxVisible + 1, settings.total) : 2;
            p = p.concat(['<li data-lp="', lp, '" class="page-item ',
                settings.nextClass, '"><a class="page-link" href="', href(lp),
                '">', settings.next, '</a></li>']);
        }
        if(settings.firstLastUse){
            p = p.concat(['<li data-lp="', settings.total, '" class="page-item last"><a class="page-link" href="',
                href(settings.total),'">', settings.last, '</a></li>']);
        }
        p.push('</ul>');
        me.find('ul.bootpag').remove();
        me.append(p.join(''));
        $bootpag = me.find('ul.bootpag');

        me.find('li').click(function paginationClick(){

            var me = $(this);
            if(me.hasClass(settings.disabledClass) || me.hasClass(settings.activeClass)){
                return;
            }
            var page = parseInt(me.attr('data-lp'), 10);
            $owner.find('ul.bootpag').each(function(){
                renderPage($(this), page);
            });

            $owner.trigger('page', page);
        });
        renderPage($bootpag, settings.page);
    });
}

})(jQuery, window);`

When clicking the next- or prev-button combined with the use of the custom href-option, the {{number}} in the href will skip a page.
When beginning on page 1, clicking on 'next' will have these effects:

• page 2 in the pager is highlighted as the current (expected)
• but the browser URL will have changed to #page-3 (or ?page=3, whatever actual href-option was configured) (unexpected)

Same goes for the 'prev' button.

Example with debug logging in JS Fiddle: http://jsfiddle.net/SuUZ6/

First init two bootpags for same content.
Second,When clicking on the top or bottom paging numbers, we bind the paging event to be triggered twice.

The current page should remain in the middle, when possible (e.g., total pages is 10, visible pages is 5, current page is 6, pagination would show 4 5 6 7 8). This would work only when there are odd number of visible pages. When there aren't enough pages for the centering to occur (e.g., beginning/end of sequence or total pages is less than or equal to visible pages), the behavior should be as it is now.

If I change total to 0 in the page callback function, the plugin will do nothing because it directly return this.I hope that it can render the pagination as current page = 1

I would like to add tooltip class but currently is not possible with your code.
Please add a feature to add custom attributes to pagination buttons.
The insterested code is in lines 135~152 and , for example, could be as follow:

            if(settings.firstLastUse){
                p = p.concat(['<li data-lp="1" class="', settings.firstClass,
                       '"><a href="', href(1), '" class="', settings.firstLastClass, '" title="', settings.firstLastTitle, '">', settings.first, '</a></li>']);
            }
            if(settings.prev){
                p = p.concat(['<li data-lp="1" class="', settings.prevClass,
                       '"><a href="', href(1), '" class="', settings.prevClass, '" title="', settings.prevTitle, '">', settings.prev, '</a></li>']);
            }
            for(var c = 1; c <= Math.min(settings.total, settings.maxVisible); c++){
                p = p.concat(['<li data-lp="', c, '"><a href="', href(c), '">', c, '</a></li>']);
            }
            if(settings.next){
                lp = settings.leaps && settings.total > settings.maxVisible
                    ? Math.min(settings.maxVisible + 1, settings.total) : 2;
                p = p.concat(['<li data-lp="', lp, '" class="',
                             settings.nextClass, '"><a href="', href(lp),
                             '" class="', settings.nextClass, '" title="', settings.nextTitle, '">', settings.next, '</a></li>']);
}

I created the pagination intially with 20 as total ....But due to some other events in the page i want to change the value dynamically....(i.e i want to change that value to 40)...How can i do this.....

Hint: I am trying to create the pagination with the total value 40 which works but the problem in that is the request event triggered by the

Through javascript i mean. So other scripts can know the page number to act accordingly.

How I can destroy or refresh component?

I need refresh pagination component with new total parameter after ajax. How I can do this?

In future versions would like to see when the page is less than or equal to 1 when the page navigation bar automatically hidden, so that more display more concise

I am using bootpag as of today (thank you for making it) as standalone inside a Wordpress page. On this page I have a series of photos inside a hidden <div style="display:none;"> and child items <div class="photo"> where the pagination is applied to the array or photos, not actual pages, we stay on a single page.

The implementation is sound, I believe, but for some reason when the pagination is initiated, it won't show the first page, it would be nice when you set a page: 1, that it actually loads that dynamic content but it doesn't, which was an easy fix (see below) until such time as it becomes a default behavior (here is hoping). However, with this fix, the pagination is never created or shown; and without it the pagination gets created but when you click on the next page, it loads the content but the pagination disappears.

This is my code:

<div id="content"><img src="loading.gif" class="aligncenter"  /></div>
<div id="page-selection" style="text-align: center;"></div>

<script>
    this.$ = this.jQuery = jQuery.noConflict(true);
    $(document).ready(function() {
        var arrPics = $('div.photo');
        $("#content").html(arrPics[0].innerHTML);
        // init bootpag
        $('#page-selection').bootpag({
            total: arrPics.length,
            page: 1,
            maxVisible: 10,
            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){
            $("#content").html(arrPics[num-1].innerHTML);
        });
    }); 
</script>

Problem:

With the line $("#content").html(arrPics[0].innerHTML); pagination never shows up, removing it will make the pagination show up but only loading spinner and no first page content. Changing the page will load the next item but the pagination disappears - along with the rest of the page except the content DIV.

Any idea what's wrong here? Thank you in advance.

I am using main-bower-files which copies all bower's libraries main files to vendor folder. But only when there is a main property in bower.json. The value of this property should be the filename of main library file: jquery.bootpag.min.js.

Seems fairly simple
package.json add devDependencies with closure compiler

  "devDependencies": {
    "google-closure-compiler": "^20210601.0.0"
  },

package.json add script to compile, use start since it's easy

  "scripts": {
    "start": "google-closure-compiler --js lib/jquery.bootpag.js --js_output_file lib/jquery.bootpag.min.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

lib/jquery.bootpag.js edit markup templating to include latest classes from Bootstrap in this.each method

      return this.each(function() {
        var $bootpag, lp, me = $(this),
          p = ['<ul class="', settings.wrapClass, ' bootpag">'];
        if(settings.firstLastUse){
          p = p.concat(['<li data-lp="1" class="page-item ', settings.firstClass,
            '"><a class="page-link" href="', href(1), '">', settings.first, '</a></li>']);
        }
        if(settings.prev){
          p = p.concat(['<li data-lp="1" class="page-item ', settings.prevClass,
            '"><a class="page-link" href="', href(1), '">', settings.prev, '</a></li>']);
        }
        for(var c = 1; c <= Math.min(settings.total, settings.maxVisible); c++){
          p = p.concat(['<li class="page-item" data-lp="', c, '"><a class="page-link" href="', href(c), '">', c, '</a></li>']);
        }
        if(settings.next){
          lp = settings.leaps && settings.total > settings.maxVisible
            ? Math.min(settings.maxVisible + 1, settings.total) : 2;
          p = p.concat(['<li data-lp="', lp, '" class="page-item ',
            settings.nextClass, '"><a class="page-link" href="', href(lp),
              '">', settings.next, '</a></li>']);
        }
        if(settings.firstLastUse){
          p = p.concat(['<li data-lp="', settings.total, '" class="page-item last"><a class="page-link" href="',
            href(settings.total),'">', settings.last, '</a></li>']);
        }
        p.push('</ul>');
        me.find('ul.bootpag').remove();
        me.append(p.join(''));
        $bootpag = me.find('ul.bootpag');
        me.find('li').click(function paginationClick() {
          var me = $(this);
          if(me.hasClass(settings.disabledClass) || me.hasClass(settings.activeClass)){
            return;
          }
          var page = parseInt(me.attr('data-lp'), 10);
          $owner.find('ul.bootpag').each(function(){
            renderPage($(this), page);
          });
          $owner.trigger('page', page);
        });
        renderPage($bootpag, settings.page);
      });

To build just npm start afterwards

npm start

I looked into the information page in detail, but I could not find any information on assigning classes to li tags.

In the pro example, clicking number 1 will not load page 1, but act as the "previous" button would have. This bug is also present on my own site.

I want a smaller size pagination and as bootstrap already support "pagination-sm" class, is there any way to add this? Thanks,

Please add an extra select box on the end for the user to choose how many rows per page.