Faire une pagination Bonjour Induste,
Dans ce tutoriel on va voir comment faire une pagination, je vais vous montrer deux façons, l'une avec un tableau, et l'autre via une base de données.
Vous devrez en fonction de la partie que vous suivrez avoir le fichier Json ou importer le fichier SQL qui se trouvent dans le fichier zippé.
Sommaire :
- Faire une pagination - Avec un tableau
- Faire une pagination - Depuis la base de données
- Affichage des données
Vous trouverez aussi dans le dossier du projet zippé les fichiers de code attaché au sujet. pour les feignasses quoi
Faire une pagination - Avec un tableau Placez le fichier Json où vous le souhaitez dans votre projet.
On va commencer par créer un nouveau fichier PHP, index.php pour ma part.
Ensuite, on va récupérer le contenu du fichier Json et le décoder.
PHP:
<?php
$items = file_get_contents('items.json');
$items = json_decode($items, true);Dans la variable $items se trouve donc un tableau à 200 entrées.
On va ensuite définir la page sur laquelle on se trouve, par défaut on sera sur la première page.
PHP:
$page = (!empty($_GET['page']) && $_GET['page'] > 0) ? intval($_GET['page']) : 1;Ensuite on va définir le nombre de lignes à afficher par page, et récupérer le total de page qu'on aura.
PHP:
$limit = 20;
$totalPages = ceil(count($items) / $limit);La variable $totalPages contiendra le nombre de pages qu'on aura en tout, dans notre cas pour 200 entrées dont 20 par page, on aura 10 pages au total.
Ensuite on va en quelque sorte "sécuriser" notre pagination pour pas que quelqu'un change l'URL, mette la page 20 alors que le maximum est 10.
PHP:
$page = max($page, 1);
$page = min($page, $totalPages);Sachant que la variable $page contient la page actuelle, on lui indique que le minimum est 1 et que le maximum est la variable $totalPages.
Maintenant si on met 8987 dans l'URL alors que la page maximale est 50, on verra les données de la page 50.
Plus d'infos sur ces fonctions :
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
-
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
PHP:
$offset = ($page - 1) * $limit;
$offset = ($offset < 0) ? 0 : $offset;
$items = array_slice($items, $offset, $limit);La variable $offset contient un entier qui indique à quel endroit commencer à lire le tableau.
Exemple : Sur la page 10, on affiche les éléments 180 à 200 car la limite par page est 20, il faut donc couper le tableau de 0 à 180, pour garder que les 20 éléments suivants.
Grâce à la fonction array_slice, on coupe notre tableau sans difficulté.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Et voilà, nous avons notre tableau de 200 entrées qui est désormais coupé en 20.
Avant de passer à l'affichage, on va voir comment faire une pagination depuis la base de données.
Faire une pagination - Depuis la base de données Pour cette seconde partie du tutoriel, il vous faudra avoir rempli votre base de données.
On va repartir sur un fichier vierge que je nommerai index_db.php.
On va ensuite lier la base de données.
PHP:
$pdo = new PDO('mysql:host=db_host;dbname=db_name', 'db_user', 'db_pass');Vous constaterez qu'il y a peu de différences entre la première partie du tutoriel, et la seconde.
On définit la page qu'on visionne, la limite de lignes à afficher par page.
PHP:
$page = (!empty($_GET['page']) && $_GET['page'] > 0) ? intval($_GET['page']) : 1;
$limit = 20;Ensuite il faut qu'on récupère le total d'entrée dans la base de données, pour déterminer le nombre de pages qu'on aura au total.
PHP:
$totalItems = $pdo->query('SELECT count(id) AS total FROM items')->fetch(PDO::FETCH_ASSOC)['total'];
$totalPages = ceil($totalItems / $limit);Comme sur la première partie, on "sécurise" notre variable $page, et on récupère l'offset.
PHP:
$page = max($page, 1);
$page = min($page, $totalPages);
$offset = ($page - 1) * $limit;
$offset = ($offset < 0) ? 0 : $offset;Pour conclure, il faut récupérer tous nos items qui sont dans la base de données, en précisant où commencer et la limite.
PHP:
$items = $pdo->query('SELECT * FROM items ORDER BY id ASC LIMIT '. $offset . ',' . $limit);C'est tout pour cette seconde partie du tutoriel.
Affichage des données Comme je vous l'ai précisé plus haut, le code que je vous donne ci-dessous fonctionne pour les deux parties, il vous faudra juste faire attention au nom des variables.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Paginate</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered">
<tr>
<th>ID</th>
<th>UserId</th>
<th>Title</th>
</tr>
<?php foreach ($items as $item): ?>
<tr>
<td><?= $item['id']; ?></td>
<td><?= $item['user_id']; ?></td>
<td><?= $item['title']; ?></td>
</tr>
<?php endforeach; ?>
</table>
<nav aria-label="Array pagination">
<ul class="pagination">
<?php if($page != 1){ ?>
<li class="page-item">
<a class="page-link" href="index.php?page=<?= $page - 1; ?>" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<?php } ?>
<?php for($i = 1;$i <= $totalPages;$i++) {?>
<li class="page-item <?= ($i == $page) ? 'active' : ''; ?>"><a class="page-link" href="index.php?page=<?= $i; ?>"><?= $i; ?></a></li>
<?php } ?>
<?php if($page < $totalPages){ ?>
<li class="page-item">
<a class="page-link"href="index.php?page=<?= $page + 1; ?>" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<?php } ?>
</ul>
</nav>
</div>
</body>
</html>Vous constaterez que j'ai intégré bootstrap, ce n'est qu'une question de design, vous pouvez faire sans ou intégrer un autre framework CSS.
C'est tout pour cette troisième partie concernant l'affichage, je ne m'attarde pas sur ce sujet car j'estime qu'il est relativement simple de manipuler ce code pour l'adapter à vos besoins.
Si vous avez des suggestions d'améliorations, ou des idées d'autres tutoriels à faire, n'hésitez pas à me demander !
WhiiTe' 
