Discussion :

[flexi2202]

Bonjour a tous

encore toute une journée a chercher après une chose spéciale et ou je suis resté sans réponse

je me casse la tête a tenter de rendre responsive une pagination

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.....14/15/16

voici ce qui se passe pour l instant en responsive

comment résoudre le soucis si possible sans javascript

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

[Doksuri]

quelque chose comme ca ? (la classe ellipsis est a ajouter en php (si jamais le count() de tes pages est trop eleve)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="pages" class="ellipsis">
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#pages {
  width: 150px;
  background-color: rgba(255, 0, 0, 0.5);
}
ol { display: flex; }
li { display: block; }
#pages.ellipsis li { display: none; }
#pages.ellipsis li:nth-child(-n+3),
#pages.ellipsis li:nth-last-child(-n+3) { display: block; }
#pages.ellipsis li:nth-child(3)::after {
  content: "...";
  display: block;
  float: right;
  padding: 0 5px;
}

l'autre option, est de gerer ca directement en php (lorsque tu boucles pour affcher tes li)

[flexi2202]

bonjour Doksuri
un tout tres grand merci pour ce code qui fonctionne parfaitement

passe une bonne journée