josecebe/twbs-pagination

jQuery pagination plugin (bootstrap powered)

jQuery pagination plugin (bootstrap powered)

Basic usage

Plugin requires jQuery (required - 1.7.0 or higher).

You can use Bootstrap CSS styles and markup (or use your own).

The following code shows call the function on <ul> tag (it can be also <div> tag).

$('#pagination-demo').twbsPagination({
  totalPages: 35,
  visiblePages: 7,
  onPageClick: function (event, page) {
    $('#page-content').text('Page ' + page);
  }
});

Contributing

For development use grunt build to make minified file. To use grunt install packages by using: npm install

Demo and Docs

For more information see docs on github pages (not completed yet)

twbs-pagination's Issues

how to set totalPages

how to set the new totalPages after the twbsPagination inited?

Make classes changeable

Can you make classes changeable with options

for classes:
.next
.active
.prev
.disable
etc...

Introduce Next/Prev pagination

Will be nice if it will be available just Prev|Next pagination

twbs pagination error if result is zero

why I get error if my count result is zero ?

"Error: Start page option is incorrect"

 $.ajax({
       type:'post,
       url:'fetchEmployeeProject',
       data:{id:4},
       success:function(data){
           $('#mypagination').twbsPagination({
              totalPages: data, //error if data is zero.
              visiblePages: 7,
              onPageClick: function (event, page) {

                  $('#divcontainer').load('load_data.php',{id:4});


              }
          });

       }

   });

Why my first page/startPage does not show at load time?

Hi, I am getting crazy with this issue. I did google and tried to solve it for 2 days. But no luck.

I followed the example shown in the doc. But why doesn't my first page load at page load time?

The content is just empty. After load, if I click page 2 and then click page 1 back, the first page will be shown. I have no idea why. I even tried to define startPage: 1 which is useless since that is default value. but no luck. Thank you very much for your help.

Please, release one version (1.2.5) to sync git version with bower

Code refactoring

Iterating the same set multiple times is deeply unwise when it can be done easily and once.

Current code:

children.filter(function () {
    return $(this).data('page') === pages.currentPage && $(this).data('page-type') === 'page';
}).addClass(this.options.activeClass);

children.filter(function () {
    return $(this).data('page-type') === 'first';
}).toggleClass(this.options.disabledClass, pages.currentPage === 1);

children.filter(function () {
    return $(this).data('page-type') === 'last';
}).toggleClass(this.options.disabledClass, pages.currentPage === this.options.totalPages);

children.filter(function () {
    return $(this).data('page-type') === 'prev';
}).toggleClass(this.options.disabledClass, !this.options.loop && pages.currentPage === 1);

children.filter(function () {
    return $(this).data('page-type') === 'next';
}).toggleClass(this.options.disabledClass, !this.options.loop && pages.currentPage === this.options.totalPages);

Should be:

var that = this,
      children = this.$listContainer.children();

children.each(function () {
    var $this = $(this),
        data = $this.data();

    if( data.page === pages.currentPage && data.pageType === 'page' )
        $this.addClass(that.options.activeClass);

    if( data.pageType === 'first' )
        $this.toggleClass(that.options.disabledClass, pages.currentPage === 1);

    if( data.pageType === 'last' )
        $this.toggleClass(that.options.disabledClass, pages.currentPage === that.options.totalPages);

    if( data.pageType === 'prev' )
        $this.toggleClass(that.options.disabledClass, !that.options.loop && pages.currentPage === 1)

    if( data.pageType === 'next' )
       $this.toggleClass(that.options.disabledClass, !that.options.loop && pages.currentPage === that.options.totalPages);
});

converting pages to items

In my use case, I have pages of items and the url based only on the items.

something like ?itemNumber=485

then the page is calculated (on the server side) based on the number of items per page the user has elected. so in that case, it might resolve to page=5

so, I need to calculate the item number for the url based on the information. I was trying to write a script with a callback function to generate the href like so:

function createHref(base,param,page,perpage,anchortext) {
    var value=page*perpage+1;
    return base+'&'+param+'='+value+anchortext;
}
jQuery('#domid').twbsPagination({
    totalPages: 30,
    visiblePages: 10,
    href: createHref('index.php?','itemNumber',{{number}},100,'#anchor'),
});

but the {{number}} is not passed to the function.

any ideas or suggestions on how to do something like this?

Page size selection

Will be nice if page size selection also implemented

how to change chinese

how to change chinese

Refresh or redraw pagination?

Hey,
What should I do when i want to refresh/ redraw pagination?
I'm doing ajax POST and when my data are returned, I want to:

• go to the first page
• refresh count of pages
• redraw pagination

How can I achive this?

can this will work in list item ?

Hi, I want to paginate my list item is this will work ?, also I am having problem on how to implement this to paginate my items, for example my default items will display 10 items each page, If I click the page2 or btn2 this will query to my table to get the records 11-20,then If I click to page3 this will query to 21-30,
and display this to my ul.can you help me please, this is my first time to use this plugin.I hope you can help me.

Thank you in advance.

Introduce get current info for pagination

Referers to: #59
Would be nice if we have a methods to get data about current state.

Examples:

var pagination = jQuery('#pagination').data('twbsPagination');
console.log( { 
 'currentPage': pagination.getCurrentPage(),
 'nextPageNumber': pagination.getNextPage(),
 'prevPageNumber': pagination.getPrevPage(),
 'lastPageNumber': pagination.getLastPage(),
 'firstPageNumber': pagination.getFirstPage(),
 ///... more else
  'isNextAllowed': pagination.isNextAllowed(),
  'isPrevAllowed': pagination.isPrevAllowed(),
  'isLastAllowed': pagination.isLastAllowed(),
  'isFirstAllowed': pagination.isFirstAllowed(),
  'showNext': ...
  'showPrev': ...
  'showFirst': ...
  'showLast': ...
  ''

some of them can be combined to one, for example isAllowed('next'), isAllowed('prev').. or show('next')/ show('+1'), show('first') / show(0)?

reach the function outside of plugin

hi
my question is how can we reach the function outside of the plugin.for example, var pager = $('#pagination-demo').twbsPagination({
totalPages: 35,
visiblePages: 7

    });

//how can I reach the render function here .thankx
console.log(pager.prototype.render());

Problem with onPageClick?

Hi.

I am trying to use your pagination and have a question. I am not a JS-expert, so forgive me if I will write something stupid :)

Here is the code I am using:

$.ajax({
    type: 'POST',
    url: "/listing-ajax",
    data: {
        'data': data,
    },
    success: function (r) {
        if (r.pagesTotal > 1) {
            $("#pagination").twbsPagination({
                totalPages: r.pagesTotal,
                visiblePages: 5,
                onPageClick: function (event, page) {
                    $.ajax({
                        type: 'POST',
                        url: '/listing-ajax?page=' + page,
                        data: {
                            'data': data,
                        },
                        success: function (data) {
                            // do some stuff
                        }
                    });
                }
            });
        } else {
            $("#pagination").html('');
        }
    }
});

As you can see I request some data with AJAX and then init the pagination if total pages more then one. In onPageClick I am requesting some new data with the page parameter.

But when the page is loading for the first time I have two AJAX requests:

1. Initial data request.
2. Data request with the page parameter.

Why? Second request should be made only when user clicks on the page link, but seems that it fires during pagination init.

Hope you did understand me :)
Thanks!

Grouped pages in pagination issue

Is there a option to display input that jump to specific page,when I click the button, it will jump to the page.
http://jsfiddle.net/eugenespb/m546Lzxw/

small optimization for jquery

currently in js I see:

            this.$element.first().on('page', this.options.onPageClick);

which possibly can simply changed to:

            this.$element.on('page', this.options.onPageClick);

@esimakin , maybe you know what is a purpose for first() and maybe it is not needed?

as we know $element always should be a single, so first() doesnt make sense?

Disabled buttons have class "active".

When choosing "1", the first button has these classes "first active disabled". It is not correct and not logical for applying Bootstrap styles.

Add more checking in this filter to make it right.
children.filter(function () {
return $(this).data('page') === pages.currentPage && $(this).data('page-type') === 'page';
}).addClass(this.options.activeClass);

href don't work at first click

button is selected on click, but the link don't open. only after the second click it works

twbs-pagination have two bug

use page href and startPage options:
$('#pagination-demo-v1_1').twbsPagination({
totalPages: ${pager.pageCount},
startPage:${pager.pageNumber},
href: "/page/{{number}}.html"
});
bug 1:
error: Previous value is always 1
right:prev=startPage>1?startPage-1:1
error:Next value is always 2 right:next=startPage==totalPages?totalPages:startPage+1
bug 2.
error:when startPage value is 1, .prev a and .first a value is "/page/1.html"
right： .prev a and .first a value is "javascript:void(0)"
error:when startPage value equals totalPages,if totalPages value is 20,.next a and .last a value is "/page/20.html"
right： .next a and .last a value is "javascript:void(0)"

My English is not good,I hope you understand what I mean.

Get current page - How To

How can we retrieve the number of the page that is currently selected?
Please note that it can ofcourse be different from the "startPage" param

change page numbers using script?

Can we change total page numbers using jquery? as if default page numbers are 30 now if i change per page entries from 10 to 20 then how can i change total number of pages according to 20 without refresh...

Next release [1.4.2]

TODO:

• Docs
• Method getCurrentPage
• enable() and disable() methods from #35
• ...

How to use twbsPagination in cascading lists

Hi team,

I am using your pagination plugin, It's simply superb and it is working good.
I want to use twbsPagination plung in for cascading listas or nested lists or sliding lists.

for example: along with http://alizahid.github.io/jquery-sliding-menu/
Could you please help me.

disable click event after clicked to link

to prevent nested manipulations with link ( like opening in open tab )
it will be great if you added in function setupEvents

$this.click(function (e) {
                    e.preventDefault();

preventDefault solves some problem for me.. and I think it is good to avoid href="javascript:void();"

or you can make it optionally something like

$this.click(function (e) {
                    base.options.preventEvent && e.preventDefault();

and make base.options.preventEvent = true

onPageClick function called multiple times when using synced pagination

Hi, I really like this plugin, but when I use synced pagination onPageClick function is called multiple times. Do you know how could I fix this? Thanks

Dynamically change the plug

javascript:

       $("#Button1").click(function () {
            $('#pagination-demo').twbsPagination({
                totalPages: 1,
                visiblePages: 9,
                onPageClick: function (event, page) {
                }
            });

        });
        $("#Button2").click(function () {
            $('#pagination-demo').twbsPagination({
                totalPages: 2,
                visiblePages: 9,
                onPageClick: function (event, page) {
                }
            });

        });

These two different totalPages，But when I click button1, and then click button2 when this totalPages still 1. how should I do?

Refresh pagination after ajax request changing items count

Hello,

Is it possible to add feature for refreshing / destroying instance of pagination in real-time?

Example - pagination is connected with ajax request which shows as many items on list as user select - pagination can be initialised only once (no refresh / destroy method).

request: add options, displays item-per-page instead of page number

Hi, great work on creating in this pagination using jquery. I would like somehow to add some extension(options), something like:

$('#pagination').twbsPagination({
totalPages: 100,
itemPerPage: 10, // the number of items in the page
});

so the output will be:
[1-10] [11-20] [21-30]....

Thanks.

Display total number of pages

Is it possible to display total number of pages?
Something like this:

[1][2][3][4][5]...[28]

(User can see that there are 28 pages in this example)

Not working with jquery 1.9.1

From what I can tell by toggling jQuery versions in JSFiddle it works with all other versions > 1.7.2 but with jQuery 1.9.1 he buttons are rendered out of order. Otherwise it's great, thanks!

http://jsfiddle.net/barryman9000/DTcHh/5318/

Will you add the possibility to redefine the totalPages after ajax load?

Hello,

can you add the possibility to redefine the totalPages?

here is my code:

$("ul.pagination", self.$elem).twbsPagination({
    totalPages: 5
    onPageClick: function( event, page ) {
       // call the ajax (i am using another method to do that)
        self.fetch( url, {
            params: $.extend({}, {
                page: page,
            }, options.params)
        }).done(function( result ) {

            // I need to redefine the totalPages after the ajax is done
           // maybe something like:

            $("ul.pagination", self.$elem).twbsPagination({
                totalPages: result.meta.last_page
            });

        });
    }
});

Next and Last buttons not blocked on last page

Next and Last buttons should be disabled on last page.
Seems the problem is that incompatible data types are compared here, both should be casted to same type:
this.$listContainer.find(".last").toggleClass("disabled", g.currentPage === this.options.totalPages);
this.$listContainer.find(".next").toggleClass("disabled", g.currentPage === this.options.totalPages)

Update current page from another element

Love your plugin, but is there a way to update the current page by clicking on another element?

I can’t seem to find a method for doing this.

request: add .disable() and .enable() method

Is there anyway to stop user click the page button when requesting data?

How can I change page by javascript?

Can I change current page by javascript?

add loop feature

will be great if option "loop" will be available and if user reached last page next page will be first.

.off() jQuery method is not compatible with jQuery<1.7

When I try to use this plugin with jquery 1.5.2, I get an error:

Uncaught TypeError: undefined is not a function

This is from line 207 of the plugin because it uses the .off() jquery method which isn't available until jQuery 1.7. So I believe either the documentation needs to be updated to reflect which jQuery versions are supported, or that line needs to be refactored.

Visible Pages > Total Pages

I noticed that you could set visible pages to a value greater than total pages. Minor "bug", but something I thought you may want to fix.

autoselect page 1

hi,

i am now using your js and it is good. what I have in mind is on how to simulate click on first page.
thank you so much

Fix version number in master

Noticed in comment unminified version have old version number.

Refresh totalPages property from ajax request

If I update the totalPages property the additional page buttons aren't added. I've tried using 'destroy' and unbind() but those don't seem to work. Is there a way to update the totalPages property and have the element render the new page buttons?

Add plugin to bower repo

It is easier to keep up to date with github changes, and in general it is easier to install plugin.

Multiple paginators

Is this with possible with the current plugin? I am calling twbsPagination() on a class, but only one shows up for it. I noticed there is a there is something regarding this in v1.1.2 for this but nothing about it in the documentation?

don't show "first" unless the "first" page link isn't showing

To make UX better, for example:

first 1 2 3 last // the "first" button is totally redundant

Should be

1 2 3 last

And then if you come to a point where 1 isn't visible anymore, render:

first 3 4 5 last

---

I personally like:

1 ... 3 4 5 ... 22

So the user knows how many pages are there.

How to I set the active page number on page refresh?

When i click the pagination links my url gets updated i.e. ?page=1, ?page=2 .. etc.

On page refresh how do i set the active page number? Do I need to use the startPage option?

Resetting pagination on filtered records

Hi Eugene,

I liked your script very much, it saved a lot of time, BIG thank you. :)

I noticed there is an issue with resetting the pagination for example It works excellent in first run, but when i apply pagination on filtered records then pagination doesn't works and doesn't renders pagination accordingly.

So to deal with this i've studied your script and managed to achieve the missing support.

My solution is to explicitly call jQuery("#pagination").removeData("twbs-pagination"); to reset View State data.

Can you please add a function like resetPagination() or something like so we dont need to call it explicitly.

OR if there is any solution for this then please let me know.

Out of order add

I ran into this jquery + Chrome issue when trying to use the plugin rendering 10 pages. I was able to fix it by changing the buildListItems to return an array since jquery 1.8+ supports appending an array. I can submit a pull request but wasn't sure if you wanted something that may break older than 1.8.

http://bugs.jquery.com/ticket/13505

bug with var in the url

Hello,

i've this in my url ?what=phone&where=&p=2 but the pagination item (.active) is on 1 not 2
Can you tell me the solution to fix this ?

Thx
Antony

After using destroy and then init, onPageClick happens twice

Hello there, I think there is a bug when redefining the totalPages using destroy and then init: Every times I do this, the onPageClick is called twice whenever I click on a page.

Here's a jsFiddle:

http://jsfiddle.net/7tLbhkt1/1/

Try clicking the Reset button a couple of times and then selecting a page.

My workaround was to set settings.onPageClick to null before calling the 'init' method. It seems the previous onPageClick is not removed from the new pagination, and I don't think that was intended.

I'm still kinda new to github and jsFiddle so I'm sorry if the link doesn't work or I'm not describing the problem clear enough.

Also, thank you for making this library. I really like how it handles the visible pages and how easy it is to use.