Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit the number of pages displayed in bootstrap 3 pagination

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.

like image 897
murday1983 Avatar asked Aug 21 '14 07:08

murday1983


2 Answers

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.

like image 96
claus Avatar answered Nov 14 '22 21:11

claus


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.

like image 6
Vanitha R Avatar answered Nov 14 '22 20:11

Vanitha R