Comment rendre ma pagination responsive
Résolu
Bonjour a tous
encore une nuit blanche a chercher après une chose spéciale et ou je suis resté sans réponse
les paginations automatique que j'ai trouvé sont superbe
car les onglets de paginations se crée au fur et a mesure des éléments a paginer
si on a pas beaucoup d articles on a que quelques onglets
mais dans mon cas je dois paginer + de 160 articles
donc cela me fait par incrément de 10
16 onglets
ce que je souhaiterais c'est de savoir comment réaliser
ceci
1/2/3.....45/46/47
voici ce qui se passe pour l instant en responsive
comment résoudre le soucis si possible sans javascript
j'ai bien trouver cette documentation mais comment la mettre en place
https://bootstrap-vue.org/docs/components/pagination-nav
voici mon code
encore une nuit blanche a chercher après une chose spéciale et ou je suis resté sans réponse
les paginations automatique que j'ai trouvé sont superbe
car les onglets de paginations se crée au fur et a mesure des éléments a paginer
si on a pas beaucoup d articles on a que quelques onglets
mais dans mon cas je dois paginer + de 160 articles
donc cela me fait par incrément de 10
16 onglets
ce que je souhaiterais c'est de savoir comment réaliser
ceci
1/2/3.....45/46/47
voici ce qui se passe pour l instant en responsive
comment résoudre le soucis si possible sans javascript
j'ai bien trouver cette documentation mais comment la mettre en place
https://bootstrap-vue.org/docs/components/pagination-nav
voici mon code
<div class="container" style=" max-width: 100%;margin:auto;">
<nav>
<ul class="pagination">
<!-- Lien vers la page précédente (désactivé si on se trouve sur la 1ère page) -->
<li class="page-item <?= ($currentPage == 1) ? "disabled" : "" ?>">
<a href="?page=<?= $currentPage - 1 ?>" class="page-link">Précédente</a>
</li>
<?php for($page = 1; $page <= $pages; $page++): ?>
<!-- Lien vers chacune des pages (activé si on se trouve sur la page correspondante) -->
<li class="page-item <?= ($currentPage == $page) ? "active" : "" ?>">
<a href="?page=<?= $page ?>" class="page-link"><?= $page ?></a>
</li>
<?php endfor ?>
<!-- Lien vers la page suivante (désactivé si on se trouve sur la dernière page) -->
<li class="page-item <?= ($currentPage == $pages) ? "disabled" : "" ?>">
<a href="?page=<?= $currentPage + 1 ?>" class="page-link">Suivante</a>
</li>
</ul>
</nav>
</div>
9 réponses
-
ModérateurBonjour,
Au lieu de faire une boucle sur tes X pages<?php for($page = 1; $page <= $pages; $page++): ?>
Modifies ton code pour ne créer que 1 page avant, la page en cours, et une ou deux pages après ...
C'est plus une question d'algorithmie que de html ou de css ....
-
ModérateurHello,
Je reviens sur cette discussion...
Perso, j'aurais sûrement fait un truc du genre<?php function getNavLink($currentPage=1,$numPage=1){ $disabled = $currentPage == $numPage ? "disabled" : "" ; return '<li class="page-item '.$disabled.'"> <a href="?page='.$numPage.'" class="page-link">'.$numPage.'</a> </li>'; } ?> <div class="container" style=" max-width: 100%;margin:auto;"> <nav> <ul class="pagination"> <!-- Lien vers la page précédente (désactivé si on se trouve sur la 1ère page) --> <?php //première page if($currentPage >2 ){ echo getNavLink($currentPage,1 ); } //page actuelle moins 1 if($currentPage >1 ){ echo getNavLink($currentPage,$currentPage -1); } //page actuelle echo getNavLink($currentPage,$currentPage); //page actuelle plus 1 if($currentPage < $pages + 1 ){ echo getNavLink($currentPage,$currentPage +1); } //Dernière page if($currentPage < $pages + 2 ){ echo getNavLink($currentPage,$currentPage +2); } ?> </ul> </nav> </div>
-
-
@jordane45Merci Jordanne pour la correction
mais cette fois c est la page 16 qui ne veux plus s afficher ...
concernant le nombre de sortie il est bien calculer et je possède la bonne valeur
la variable est affichée en haut du tableau
https://phil.pecheperle.be/journee-peche/journees-de-peche3.php -
Modérateur@flexi2202Je ne suis pas bien réveillé ce matin..
//page actuelle plus 1 if($currentPage < $pages ){ echo getNavLink($currentPage,$currentPage +1); } //Dernière page if($currentPage < $pages - 1 ){ echo getNavLink($currentPage,$currentPage +2); } -
@jordane45nickel jordane un super grand merci ,
c 'est super
bon week end
et merci pour toute ton aide depuis des mois
-
-
Salut,
Je ne sais pas si ça peut t'aider, mais pour la pagination, j'utilise cette classe PHP :
https://github.com/ashish101184/ashish/blob/master/wordpress%20plugin/wp-homegrid/pagination.class.php
Malheureusement plus mis à jour depuis quelques années, donc pas responsive.
J'ai commencé à transformer cette classe PHP pour la rendre compatible avec Bootstrap 5. -
bonjour Jordane
merci pour l aide
Mais sur ce coup j avoue ne pas trop bien suivre -
<?php for($page = 1; $page <= $pages; $page++): ?>
donc je reviens pour essayer de comprendre , car aucun essais que je fais ne fonctionne
$page = 1;
est la page du départ
si je la modifie je suis en page 2 ou 3
$page <= $pages
c est ma page courante
et enfin$page++
c est l incrément des pages
donc d après ce que je peux comprendre je dois modifier cette partie$page <= $pages
si j écris ceci
$page,$page <= $pages
cela plante entre autre
j'ai essaye une multitude de combinaisons -
merci pour l aide
si je dis que cela fait 4 h00 que je cherche , tu ne me croiras pas et pourtant ..
voila en fait exact une fois la boucle partie il ne me reste plus que suivant et précédant et cela fonctionne
<?php for($page = 1; $page <= $pages; $page++): ?> <!-- Lien vers chacune des pages (activé si on se trouve sur la page correspondante) --> <li class="page-item <?= ($currentPage == $page) ? "active" : "" ?>"> <a href="?page=<?= $page ?>" class="page-link"><?= $page ?></a> </li> <?php endfor ?>
voila ce que je viens de faire<li class="page-item"><a class="page-link " href="?page=<?= $page=1 ?>"><span>1</span></a></li> <li class="page-item"><a class="page-link " href="?page=<?= $page=2 ?>"><span>2</span></a></li> <li class="page-item"><a class="page-link " href="?page=<?= $page=3 ?>"><span>3</span></a></li>
et donc de cette façon il ne voit 3 pages et pour voir les suivantes il doit cliquer sur suivant , si j'ai bien compris -
voila tout fonctionne
encore un super très grand merci jordane -
bonsoir Jordane
Merci beaucoup pour le code cela fonctionne nickel sauf dans les dernières pages
je te laisse vérifier
https://phil.pecheperle.be/journee-peche/journees-de-peche3.php -
bonjour
merci pour le lien
mais je préfère la solution de jordane qui est très légère
