Comment rendre ma pagination responsive

Résolu

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention - 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>

A voir également:

Comment rendre ma pagination responsive
Pagination powerpoint - Guide
Sommaire avec pagination - Guide
Le fichier de pagination est insuffisant pour terminer cette opération ✓ - Forum Matériel & Système
Pagination word - Guide
Pagination google doc à partir de la page 3 - Forum Google Docs

9 réponses

Réponse 1 / 9

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 2 / 9

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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>

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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);
      }

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752 > flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention

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);
      }

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190 > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

nickel jordane un super grand merci ,
c 'est super

bon week end
et merci pour toute ton aide depuis des mois

Réponse 3 / 9

cactux Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

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.

Réponse 4 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

bonjour Jordane

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

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

Posez votre question

Réponse 5 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Réponse 6 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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

Réponse 7 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

voila tout fonctionne

encore un super très grand merci jordane

Réponse 8 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

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

Réponse 9 / 9

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

bonjour
merci pour le lien
mais je préfère la solution de jordane qui est très légère

Discussions similaires

[Erreur lors d'une opération de PAGINATION]

Fichier de pagination insuffisant

Excel - Numérotation pages plusieurs feuilles

Commencez la numérotation a partir de la 4ème page

comment paginer un doc a partir de la page 3

Votre réponse

Discussions similaires