Comment rendre ma pagination responsive

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - Modifié le 8 déc. 2021 à 07:56
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 13 déc. 2021 à 13:24
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

     <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

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
8 déc. 2021 à 12:30
Bonjour,

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 ....



1
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
10 déc. 2021 à 22:20
Hello,

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>

1
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
11 déc. 2021 à 10:02
pardon...

Oui
   
      //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);
      }
      
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
11 déc. 2021 à 10:13
Merci 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
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718 > flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024
11 déc. 2021 à 10:26
Je 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);
      }
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
11 déc. 2021 à 10:37
nickel jordane un super grand merci ,
c 'est super

bon week end
et merci pour toute ton aide depuis des mois
0
cactux Messages postés 3 Date d'inscription mercredi 17 janvier 2007 Statut Membre Dernière intervention 11 décembre 2021 1
11 déc. 2021 à 23:24
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.
1
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
8 déc. 2021 à 15:34
bonjour Jordane

merci pour l aide
Mais sur ce coup j avoue ne pas trop bien suivre
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
9 déc. 2021 à 00:29
<?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
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
9 déc. 2021 à 00:54
Non mais il faut enlever la boucle
Et mettre trois boutons
: un pour la page précédente un pour la page en cours et un pour la page suivante.
Quand je dis un..., tu peux faire deux ou trois à toi de voir..
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
Modifié le 9 déc. 2021 à 01:27
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
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
9 déc. 2021 à 02:31
voila tout fonctionne

encore un super très grand merci jordane
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
10 déc. 2021 à 23:09
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
0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
13 déc. 2021 à 13:24
bonjour
merci pour le lien
mais je préfère la solution de jordane qui est très légère
0