Limit the number of pages displayed in bootstrap 3 pagination

48,390

Solution 1

There is a jquery plugin to work with bootstrap, that solves this problem: http://josecebe.github.io/twbs-pagination/ Have a look at the "visible pages option" section.

You can find more/other solutions with google and bootstrap 3 pagination many pages.

Solution 2

This question was asked long ago, but it came up while I was looking for an answer.

Specifying max-size='X' worked for me. The bootstrap pagination tag would look like:

<pagination class="pagination-sm" total-items="1000" items-per-page="10" max-size="10">
</pagination>

Hope this helps someone.

Solution 3

Assuming your page is rendered server side (PHP, Ruby, Java etc) you're likely going to want to render the pagination properly on the server side.

I solved this problem not so long ago in PHP, I had a function which was called for every page number which decided whether that number should be rendered (or something else).

It went something like this

if the page number is < 3, render the page number
if the page number is within +-2 of the current page, render the page number
if the page number is > the total number of pages -3 render the page number
if the last page number wasn't rendered and dots haven't already been rendered render dots '...' do indicate a gap

else do nothing

I hope this points you in the right kind of direction

Solution 4

You can try reviews.maxPages as shown below:

<pagination 
    total-items="reviews.count"
    ng-model="reviews.pageNo"
    max-size="reviews.maxPages"
    boundary-links="true"
    rotate="false"
    num-pages="reviews.noPages"
    ng-change="changePageTo(reviews.pageNo)"></pagination>
Share:
48,390
murday1983
Author by

murday1983

I started my IT career as a web tester and am now a frontend web developer and UX web designer.

Updated on August 25, 2020

Comments

  • murday1983
    murday1983 almost 4 years

    I have various web pages on my website which are using bootstraps (bootstrap 3) pagination but I need to know how to limit the number of pages displayed in it (e.g. display pages 1 to 10 only).

    If you then select page 2, page 11 would b displayed and so on.

    How do you do this?

    I know it will probably be JavaScript/jQuery but any help is appreciated. and if it can be done without having to use JavaScript/jQuery, then all the better.

    Below is a screenshot of my pagination.

    Current pagination

    As you can see there are 12 pages displayed, I would like pages 11 & 12 to be hidden until page 2 or the next page is selected then pages 11 would be displayed and pages one would be hidden, so on and so on.