josecebe / twbs-pagination

jQuery pagination plugin (bootstrap powered)
http://josecebe.github.io/twbs-pagination/
Other
1.1k stars 401 forks source link

Synchronized pagination elements are incompatible with divs #145

Closed Ectropy closed 7 years ago

Ectropy commented 7 years ago

When I attempt to attach twbs-pagination to divs using a class only the second twbs-pagination element is displayed.

Example of how the HTML code looks when the unexpected behavior occurs: <div class="twbs-paginator"></div> <div id="theElementThatHasSeveralPages"></div> <div class="twbs-paginator"></div>

It seems to work correctly when the divs are changed to uls

Example of how the code looks when the synchronized pagination displays correctly. <ul class="twbs-paginator"></ul> <div id="theElementThatHasSeveralPages"></div> <ul class="twbs-paginator"></ul>

The js looked like this for both the div version (unexpected behavior) and the ul version (expected behavior):

$('.twbs-paginator').twbsPagination({
     totalPages: numberOfPages,
     visiblePages: 7,
     initiateStartPageClick: false,
     onPageClick: function (event, p) {
    load(p);
    }
});
Ectropy commented 7 years ago

I've looked into this issue a little further. It appears that every div before the last div has <ul class="pagination"></ul> added to it, but unlike a correctly drawn pagination element, there is nothing inside of this ul!

I'm trying to figure out the source of this issue. For now it just seems like people should use uls instead of divs when they want synchronized pagination.