: 14 + 8 =

Bienvenue, Invité
Nom d'utilisateur : Mot de passe : Se souvenir de moi

SUJET : Création d’une pagination avancée avec PHP

Création d’une pagination avancée avec PHP il y a 3 ans 8 mois #40

  • Abderrahim
  • Portrait de Abderrahim
  • Hors ligne
  • Administrator
  • Rankadmin
  • Messages : 138
  • Remerciements reçus 2
  • Karma: 1
Dans ce tuto, je vais vous montrer comment créer une pagination avancée en PHP. Parmi toutes les paginations que j’ai pu rencontrer, c’est celle que je trouve la plus ergonomique car elle donne des informations essentielles pour une pagination (nombre total de pages, page courante), permet de changer de pages rapidement (accès directs aux pages de départ, d’arrivée et connexes, boutons précédent/suivant), mais aussi une des plus agréables d’un point de vue esthétique car elle occupe toujours la même place.

La pagination que je vous propose s’incruste facilement dans votre site web puisqu’elle fait appel à une fonction unique pour l’affichage. Le nombre d’items par page est paramétrable, ainsi que la variable d’URL utilisée pour stocker le numéro de la page courante. Contrairement à certaines paginations qui tirent tout le contenu d’une table avant de filtrer à l’affichage, seules les entrées concernées sont récupérées depuis la base de données. Cela évite les problèmes de débordement mémoire pour des tables immenses par exemple.

En pratique, ça donne ça…


h11d3eec.jpg



Maintenant on peut mettre la main dans le cambouis…

La pagination utilise trois fichiers :

- index.php (c’est la page qui affiche l’ensemble des entrées et qui fait appel à la fonction de pagination)
- paginate.php (contient la fonction de pagination)
- style.css (les CSS ppour la mise en forme de la pagination)

index.php

Ce fichier est la partie visible de l’iceberg. Il permet d’afficher les entrées récupérées depuis la base de données, et fait appel à la fonction de pagination. Dans cet exemple, la table s’appelle pagination, et les données sont issues de la colonne p_text.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagination PHP</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
<div>
	<?php
	// Imports des fichiers de pagination/DB
	include_once('paginate.php');
 
	// Connexion à la BDD (à vous de configurer les paramètres de connexion à la base)
	$dbc = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
	if (!$dbc) {
		trigger_error('Connexion à la BDD impossible : ' . mysqli_connect_error() );
		exit();
	}
 
	// Calcul du nombre total d'entrées $total dans la table pagination
	$res = mysqli_query($dbc, 'SELECT COUNT(*) FROM pagination');
	$row = mysqli_fetch_row($res);
	$total = $row[0];
 
	// Libération de la mémoire associée au résultat
	mysqli_free_result($res);
 
	$epp = 3; // nombre d'entrées à afficher par page (entries per page)
	$nbPages = ceil($total/$epp); // calcul du nombre de pages $nbPages (on arrondit à l'entier supérieur avec la fonction ceil())
 
	// Récupération du numéro de la page courante depuis l'URL avec la méthode GET
	// S'il s'agit d'un nombre on traite, sinon on garde la valeur par défaut : 1
	$current = 1;
	if (isset($_GET['p']) && is_numeric($_GET['p'])) {
		$page = intval($_GET['p']);
		if ($page >= 1 && $page <= $nbPages) {
			// cas normal
			$current=$page;
		} else if ($page < 1) {
			// cas où le numéro de page est inférieure 1 : on affecte 1 à la page courante
			$current=1;
		} else {
			//cas où le numéro de page est supérieur au nombre total de pages : on affecte le numéro de la dernière page à la page courante
			$current = $nbPages;
		}
	}
 
	// $start est la valeur de départ du LIMIT dans notre requête SQL (dépend de la page courante)
	$start = ($current * $epp - $epp);
 
	// Récupération des données à afficher pour la page courante
	$qry = "SELECT p_text FROM pagination LIMIT $start, $epp";
	$res = @mysqli_query($dbc, $qry);
 
	if ($res) {
		// Affichage des données
		echo "<ul id=\"results\">\n";
		while($item = mysqli_fetch_array($res)) {
		  echo "\t<li>" .$item['p_text']. "</li>\n";
		}
		echo "</ul>\n";
 
		mysqli_free_result($res);
	} else {
		echo mysqli_error($dbc);
	}
	?>
 
	<?php echo paginate('http://islart.com/forum/developpement-web/40-creation-d-une-pagination-avancee-avec-php', '?p=', $nbPages, $current); ?>
</div>
</body>
</html>

paginate.php

Ce fichier contient uniquement la définition la fonction de pagination.
<?php
/**
* Affiche la pagination à l'endroit où cette fonction est appelée
* @param string $url L'URL ou nom de la page appelant la fonction, ex: 'index.php' ou 'http://example.com/'
* @param string $link La nom du paramètre pour la page affichée dans l'URL, ex: '?page=' ou '?&p='
* @param int $total Le nombre total de pages
* @param int $current Le numéro de la page courante
* @param int $adj (facultatif) Le nombre de pages affichées de chaque côté de la page courante (défaut : 3)
* @return La chaîne de caractères permettant d'afficher la pagination
*/
function paginate($url, $link, $total, $current, $adj=3) {
	// Initialisation des variables
	$prev = $current - 1; // numéro de la page précédente
	$next = $current + 1; // numéro de la page suivante
	$penultimate = $total - 1; // numéro de l'avant-dernière page
	$pagination = ''; // variable retour de la fonction : vide tant qu'il n'y a pas au moins 2 pages
 
	if ($total > 1) {
		// Remplissage de la chaîne de caractères à retourner
		$pagination .= "<div class=\"pagination\">\n";
 
		/* =================================
		 *  Affichage du bouton [précédent]
		 * ================================= */
		if ($current == 2) {
			// la page courante est la 2, le bouton renvoie donc sur la page 1, remarquez qu'il est inutile de mettre $url{$link}1
			$pagination .= "<a href=\"{$url}\">◄</a>";
		} elseif ($current > 2) {
			// la page courante est supérieure à 2, le bouton renvoie sur la page dont le numéro est immédiatement inférieur
			$pagination .= "<a href=\"{$url}{$link}{$prev}\">◄</a>";
		} else {
			// dans tous les autres, cas la page est 1 : désactivation du bouton [précédent]
			$pagination .= '<span class="inactive">◄</span>';
		}
 
		/**
		 * Début affichage des pages, l'exemple reprend le cas de 3 numéros de pages adjacents (par défaut) de chaque côté du numéro courant
		 * - CAS 1 : il y a au plus 12 pages, insuffisant pour faire une troncature
		 * - CAS 2 : il y a au moins 13 pages, on effectue la troncature pour afficher 11 numéros de pages au total
		 */
 
		/* ===============================================
		 *  CAS 1 : au plus 12 pages -> pas de troncature
		 * =============================================== */
		if ($total < 7 + ($adj * 2)) {
			// Ajout de la page 1 : on la traite en dehors de la boucle pour n'avoir que index.php au lieu de index.php?p=1 et ainsi éviter le duplicate content
			$pagination .= ($current == 1) ? '<span class="active">1</span>' : "<a href=\"{$url}\">1</a>"; // Opérateur ternaire : (condition) ? 'valeur si vrai' : 'valeur si fausse'
 
			// Pour les pages restantes on utilise itère
			for ($i=2; $i<=$total; $i++) {
				if ($i == $current) {
					// Le numéro de la page courante est mis en évidence (cf. CSS)
					$pagination .= "<span class=\"active\">{$i}</span>";
				} else {
					// Les autres sont affichées normalement
					$pagination .= "<a href=\"{$url}{$link}{$i}\">{$i}</a>";
				}
			}
		}
		/* =========================================
		 *  CAS 2 : au moins 13 pages -> troncature
		 * ========================================= */
		else {
			/**
			 * Troncature 1 : on se situe dans la partie proche des premières pages, on tronque donc la fin de la pagination.
			 * l'affichage sera de neuf numéros de pages à gauche ... deux à droite
			 * 1 2 3 4 5 6 7 8 9 … 16 17
			 */
			if ($current < 2 + ($adj * 2)) {
				// Affichage du numéro de page 1
				$pagination .= ($current == 1) ? "<span class=\"active\">1</span>" : "<a href=\"{$url}\">1</a>";
 
				// puis des huit autres suivants
				for ($i = 2; $i < 4 + ($adj * 2); $i++) {
					if ($i == $current) {
						$pagination .= "<span class=\"active\">{$i}</span>";
					} else {
						$pagination .= "<a href=\"{$url}{$link}{$i}\">{$i}</a>";
					}
				}
 
				// ... pour marquer la troncature
				$pagination .= '&hellip;';
 
				// et enfin les deux derniers numéros
				$pagination .= "<a href=\"{$url}{$link}{$penultimate}\">{$penultimate}</a>";
				$pagination .= "<a href=\"{$url}{$link}{$total}\">{$total}</a>";
			}
			/**
			 * Troncature 2 : on se situe dans la partie centrale de notre pagination, on tronque donc le début et la fin de la pagination.
			 * l'affichage sera deux numéros de pages à gauche ... sept au centre ... deux à droite
			 * 1 2 … 5 6 7 8 9 10 11 … 16 17
			 */
			elseif ( (($adj * 2) + 1 < $current) && ($current < $total - ($adj * 2)) ) {
				// Affichage des numéros 1 et 2
				$pagination .= "<a href=\"{$url}\">1</a>";
				$pagination .= "<a href=\"{$url}{$link}2\">2</a>";
				$pagination .= '&hellip;';
 
				// les pages du milieu : les trois précédant la page courante, la page courante, puis les trois lui succédant
				for ($i = $current - $adj; $i <= $current + $adj; $i++) {
					if ($i == $current) {
						$pagination .= "<span class=\"active\">{$i}</span>";
					} else {
						$pagination .= "<a href=\"{$url}{$link}{$i}\">{$i}</a>";
					}
				}
 
				$pagination .= '&hellip;';
 
				// et les deux derniers numéros
				$pagination .= "<a href=\"{$url}{$link}{$penultimate}\">{$penultimate}</a>";
				$pagination .= "<a href=\"{$url}{$link}{$total}\">{$total}</a>";
			}
			/**
			 * Troncature 3 : on se situe dans la partie de droite, on tronque donc le début de la pagination.
			 * l'affichage sera deux numéros de pages à gauche ... neuf à droite
			 * 1 2 … 9 10 11 12 13 14 15 16 17
			 */
			else {
				// Affichage des numéros 1 et 2
				$pagination .= "<a href=\"{$url}\">1</a>";
				$pagination .= "<a href=\"{$url}{$link}2\">2</a>";
				$pagination .= '&hellip;';
 
				// puis des neuf derniers numéros
				for ($i = $total - (2 + ($adj * 2)); $i <= $total; $i++) {
					if ($i == $current) {
						$pagination .= "<span class=\"active\">{$i}</span>";
					} else {
						$pagination .= "<a href=\"{$url}{$link}{$i}\">{$i}</a>";
					}
				}
			}
		}
 
		/* ===============================
		 *  Affichage du bouton [suivant]
		 * =============================== */
		if ($current == $total)
			$pagination .= "<span class=\"inactive\">►</span>\n";
		else
			$pagination .= "<a href=\"{$url}{$link}{$next}\">►</a>\n";
 
		// Fermeture de la <div> d'affichage
		$pagination .= "</div>\n";
	}
 
	return ($pagination);
}
?>

style.css

Enfin, on ajoute un peu de style à la pagination pour la rendre visuellement plus agréable.
.pagination {
font:12px Arial, Helvetica, sans-serif;
margin:40px 0 0 90px;
}
 
.pagination a {
background:#fff;
border:1px solid #06c;
color:#06c;
margin:2px;
padding:.2em .4em;
text-decoration:none
}
 
.pagination a:hover {
background:#fff;
border:1px solid #bd88fe;
color:#bd88fe
}
 
.pagination span.inactive {
background:#fff;
border:1px solid #f0f0ff;
color:#f0f0ff;
margin:2px;
padding:.2em .4em
}
 
.pagination span.active {
background:#f4ebff;
border:1px solid #bd88fe;
color:#bd88fe;
font-weight:700;
margin:2px;
padding:.2em .4em
}
 
#results{
margin-left:90px;
list-style-type:circle
}
Dernière édition: il y a 3 ans 8 mois par Abderrahim.
L'administrateur a désactivé l'accès en écriture pour le public.
Temps de génération de la page : 0.338 secondes

Haut