Classe de pagination en PHP5 et CSSPHP | ASP
Suivez @net_zenTags : css | css2 | css3 | html5 | php5 |
Dans tout site internet ou blog, on trouve toujours un système de pagination pour afficher des articles. Ces articles issues d'une base de données peuvent être filtrer avec des catégories ou des tags. Le Blog de NetZen n'échappe pas à la règle ! Mais si nombres d'exemples ou tutoriel sont disponibles avec un bon moteur de recherche comme Google, peu sont fonctionnels et aux normes du W3C. Voici la version de NetZen...
Aujourd'hui avec le CSS 2 et demain le CSS 3, soyez moderne et gagner du temps !
Utilisez les listes ordonnées.
<ol> <li><a href="recherche.php?page=1" rel="precedent"></a></li> <li><a href="recherche.php?page=1">1</a></li> <li class="selected">2</li> <li><a href="recherche.php?page=4">3</a></li> <li><a href="recherche.php?page=3">4</a></li> <li><a href="recherche.php?page=3" rel="suivant"></a></li> </ol>
Ajoutons maintenant la décoration pour transformer cette liste de puces en système de pagination.
ol.pagination { list-style:none; text-align:center; margin:25px 0 0; padding:0;}
ol.pagination li { display:inline; }
ol.pagination a, ol.pagination li.selected { font-weight:bold; background-color:white; line-height:14px; margin:0 2.5px 0 0; padding:2.5px 5px; border:1px solid #d8cdbf; text-decoration:none; font-family: Arial, Helvetica; font-size:14px; border-radius:7.5px; -o-border-radius:7.5px; -moz-border-radius:7.5px; -webkit-border-radius:7.5px; -moz-box-shadow: 1px 1px 1px #999; -webkit-box-shadow: 1px 1px 1px #999; box-shadow: 1px 1px 1px #999;}
ol.pagination a:hover, ol.pagination a:focus { background-color:#e85420; color:white;}
ol.pagination li.selected { background-color:#95809f; color:white;}
ol.pagination a[rel="precedent"]:before { content: "«";}
ol.pagination a[rel="suivant"]:after { content: "»";}
Attention la syntaxe a[rel="suivant"]:before n'est pas comptabible avec la vieille version d'Internet Explorer 6.0 ! Attaquons maintenant la classe PHP pour gérer la pagination. La classe initiale provient du site de snoupix et a été améliorée pour générer le code CSS.
Fichier "class-pagination.php"
<?php
class Pagination{
/**
* Fonction qui retourne une div de pagination en fonction de plusieurs paramètres
* @return $html une chaine contenant une div.
* @param object $chemin
* @param object $nomget
* @param object $total
* @param object $courante[optional]
* @param object $affichage[optional]
*/
public static function affiche($chemin,$nomget,$total,$courante=1,$affichage=2){
//variable contenant le code HTML a retourner
$html = '';
//Si il n'y a pas plus d'une page on renvoit rien...
if($total<=1)
return $html;
$precedent = $courante-1;
$suivant = $courante+1;
$textePrecedent = '«';
$texteSuivant = '»';
$html .= '<ol class="pagination">';
$html .= "\n\t\t\t";
/*Boutons précédent*/
if ($courante == 2) // si on est sur la page 2, Nous retournons sur la page initiale (permet d'éviter les doublons index.php et index.php?page=1)
{$html.= Pagination::lien($chemin,$textePrecedent,$precedent,1);}
elseif($courante > 2) // si la page courante est supérieure à 2 le bouton précédent renvoit sur la page dont le numéro est immédiatement inférieur
{$html.= '<li>';
$html.= Pagination::lien($chemin,$textePrecedent,$nomget,$precedent);
$html.= '</li>';}
/*Affichage des numéros des pages*/
if($total < 7 + $affichage*2){
//affiche tous les numéros
$html.= "\n\t\t\t";
$html.= '<li>';
$html.= ($courante == 1) ? 'La classe est enfin appelée dans un fichier principale avec la syntaxe suivante (il faut bien évidemment ajouter la ligne d'inclusion
require_once($_SERVER['DOCUMENT_ROOT'].'class-pagination.php');
Pagination::affiche('$url','$variable',$nombre_de_pages_total,$page_courante,$nombre-articles_par_page);
Cette classe fonctionne quelque soit le chemin et en mode rewriting.
