web-dev-qa-db-fra.com

Limitez le nombre de pages affichées dans bootstrap 3 pagination

J'ai plusieurs pages Web sur mon site Web qui utilisent la pagination bootstrap (bootstrap 3) mais j'ai besoin de savoir comment limiter le nombre de pages qui y sont affichées (par exemple, afficher les pages 1 à 10 uniquement).

Si vous sélectionnez ensuite la page 2, la page 11 s'affichera et ainsi de suite.

Comment est-ce que tu fais ça?

Je sais que ce sera probablement JavaScript/jQuery mais toute aide est appréciée. et si cela peut être fait sans avoir à utiliser JavaScript/jQuery, alors tant mieux.

Voici une capture d'écran de ma pagination.

Current pagination

Comme vous pouvez le voir, il y a 12 pages affichées, je voudrais que les pages 11 et 12 soient masquées jusqu'à ce que la page 2 ou la page suivante soit sélectionnée, puis les pages 11 seraient affichées et les pages une seraient masquées, etc.

javascriptjquerycsstwitter-bootstrappagination
20
murday1983

Il existe un plugin jquery pour travailler avec bootstrap, qui résout ce problème: http://josecebe.github.io/twbs-pagination/ Jetez un œil à la section "option des pages visibles".

Vous pouvez trouver plus/d'autres solutions avec google et bootstrap 3 pagination many pages.

15
claus

En supposant que votre page est rendue côté serveur (PHP, Ruby, Java etc), vous voudrez probablement rendre la pagination correctement côté serveur.

J'ai résolu ce problème il n'y a pas si longtemps en PHP, j'avais une fonction qui était appelée pour chaque numéro de page qui décidait si ce numéro devait être rendu (ou autre chose).

Il est allé quelque chose comme ça

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

J'espère que cela vous oriente dans la bonne direction

5
Sam

Cette question a été posée il y a longtemps, mais elle s'est posée alors que je cherchais une réponse.

En précisant max-size='X' a fonctionné pour moi. La balise de pagination bootstrap ressemblerait à:

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

J'espère que cela aide quelqu'un.

4
Vanitha R

Tu peux essayer reviews.maxPages comme indiqué ci-dessous:

<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>
2
SydMK