Pagination avec de l’Ajax, sans Ajax !

Sous ce titre un peu étrange se trouve un problème auquel je suis confronté aujourd’hui. Il me faut effectuer une pagination sur des contenus intégralement chargés en Ajax.

Mais je ne dois pas recharger ma page principale lors du changement de « page » sur mon contenu.

Je vais donc intégrer cette pagination entièrement en HTML / CSS / Javascript, et un peu de PHP biensûr 😉

Résumé

  • J’ai une page avec un menu à gauche, et un contenu à droite.
  • Mon menu se compose de familles.
  • Une famille ‘parente’ contient plusieurs familles ‘filles’.

Exemple :

  • Categorie 1
    • Première Sous-Catégorie
    • Deuxième Sous-Catégorie
    • Troisième Sous-Catégorie

Lorsque je clique sur une Catégorie, le menu se « déroule » et affiche les Sous-Catégorie. De plus, le contenu de la première Sous-Catégorie est directement affiché dans le contenu de ma page.
L’affichage du contenu est fait par un appel Ajax.

Le contenu est une liste de vignettes de magazines. J’affiche actuellement tous les magazines sur une seule page, ce qui est relativement lourd.
Je veux en afficher 12 par page seulement.

Les bases

Commençons donc par se créer quelques constantes :

define('MAX_ISSUES_PER_PAGE', 12) ;
define('ISSUES_COUNT', sizeof($tabMagazines)) ;
define('PAGES_COUNT', ceil(ISSUES_NUMBER / MAX_ISSUES_PER_PAGE)) ;

La variable $tabMagazines est un tableau contenant pour chaque magazines les infos dont j’ai besoin (Ex: $tabMagazines[0][‘ID’] contient l’ID dans ma base de données).

J’ai une boucle :

for ($i = 0 ; $i < ISSUES_COUNT ; $i++) {
  $html .= "..." ;
}

A l’intérieur de laquelle je crée mes vignettes par magazine.
Le contenu est inséré dans une variable $html et affiché par la suite.

Ce que je vais faire ensuite, c’est créer des divs contenants 12 vignettes chacun.
Pour ce faire, rien de plus simple !
On se rajoute 2 variables :

$divCount   = 0 ;
$totalCount = 0 ;
$lastDiv    = 1 ;

La première va servir à compter les vignettes dans un div, et la deuxième sert à numéroter les div.
Nous allons les appeler ‘magazineX’ où X sera la valeur de $lastDiv.

Rajoutons maintenant le code pour ouvrir le div, au début de notre boucle.

if (($i % MAX_ISSUES_PER_PAGE) == 0) {
  $html .= '<div id="magazine' . $lastDiv . '">' ;
}

Et le code pour refermer le div à la fin de la boucle.

$divCount++   ;
$totalCount++ ;

if ($divCount == MAX_ISSUES_PER_PAGE || $lastDiv == ISSUES_COUNT) {
  $html .= '</div>' ;
  $divCount = 0 ;
  $lastDiv++ ;
}

Voila nous avons maintenant plusieurs div contenant chacun 12 vignettes.
Mais pour le moment tout est encore affiché me direz vous !
C’est pourquoi nous allons créer 2 classes CSS : ‘divShow’ et ‘divHide’.

.divShow { display: block ; }
.divHide { display: none  ; }

Et attribuer la classe divShow au premier div, et la classe divHide aux autres.
Modifions donc la ligne qui nous ouvre le div en conséquence.

$html .= '<div id="magazine' . $lastDiv . '" class="' . (($lastDiv == 1) ? "divShow" : "divHide") . '">' ;

Un peu de CSS

Il est temps de se rajouter les boutons « Précédent », « Suivant », etc…
Pour ce faire on va commencer par faire un peu de CSS pour rendre la chose jolie !
(Les couleurs choisies dans l’exemple sont celles de mon site, vous pouvez les changer bien entendu comme bon vous semble !)

.pagination_content {
	float: left ;
	width: 100% ;
	text-align: right ;
	margin-top: 20px ;
}
.pagination {
	float: right ;
	font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif ;
	padding: 3px 1px ;
	margin: 3px 1px ;
}
.pagination a {
	background-color: #fff ;
	border: 1px solid #666 ;
	color: #333 ;
	margin: 2px ;
	padding: 2px 5px ;
	text-decoration: none ;
}
.pagination a:hover,active {
	background-color: #568E1A ;
	border: 1px solid #4A5356 ;
	color: #fff ;
	padding: 2px 5px ;
}
.pagination span.active {
	background-color: #7F8080 ;
	border: 1px solid #666 ;
	color: #fff ;
	font-weight: bold ;
	margin: 2px ;
	padding: 2px 5px ;
}
.pagination span.inactive {
	background-color: #fff ;
	border: 1px solid #eee ;
	color: #ddd ;
	margin: 2px ;
	padding: 2px 5px ;
}

Code principal

Et maintenant le code à rajouter dans la fermeture du div contenant les 12 vignettes.

$pagination = '' ;
if (PAGES_COUNT > 1) {

// Ouverture des div Pagination
  $pagination .= '<div class="pagination_content">' ;
  $pagination .= '<div class="pagination">' ;

// Bouton précédent
  if ($lastDiv == 1) { $pagination .= '<span class="inactive">&laquo;</span>' ;
} else {
  $pagination .= '<a href="">&laquo;</a>' ;
}

// Pages
for ($j = 1 ; $j <= PAGES_COUNT ; $j++) {
  if ($j == $lastDiv) {
    $pagination .= '<span class="active">' . $j . '</span>' ;
  } else {
    $pagination .= '<a href="">' . $j . '</a>' ;
  }
}

// Bouton suivant
if ($lastDiv == PAGES_COUNT) {
  $pagination .= '<span class="inactive">&raquo;</span>' ;
} else {
  $pagination .= '<a href="">&raquo;</a>' ;
}

// Fermeture des div Pagination
$pagination .= '</div>' ;
$pagination .= '</div>' ;

// Ajout du contenu de pagination
$html .= $pagination ;

}

Un peu de JS

Voila pour ce qui est de la mise en place des boutons et du contenu.
Maintenant il va falloir mettre les actions de changement de page en place.
Il s’agit concrètement de changer les classes du div sur lequel on était, et du div sur lequel on va.

A lire aussi :  Centrer des éléments en JS

Pour faire cela, Javascript va nous être utile.
J’utilise actuellement le framework jQuery. Et justement dans ce cas il sera extrèmement pratique, car il possède des fonctions « addClass() » et « removeClass()« .
Tout juste ce dont nous avons besoin !

function moveTo(from, to) {
  $('#issue'+from).addClass('divHide').removeClass('divShow') ;
  $('#issue'+to).addClass('divShow').removeClass('divHide') ;
}

Le PHP final

Et maintenant on va modifier les liens dans la pagination comme ceci :

$pagination = '' ;
if (PAGES_COUNT > 1) {

// Ouverture des div Pagination
  $pagination .= '<div class="pagination_content">' ;
  $pagination .= '<div class="pagination">' ;

// Bouton précedent
  if ($lastDiv == 1) { $pagination .= '<span class="inactive">&laquo;</span>' ;
} else {
  $pagination .= '<a href="" onClick="moveTo(' . $lastDiv . ', ' . ($lastDiv - 1) . ') ; return false ;">&laquo;</a>' ;
}

// Pages
for ($j = 1 ; $j <= PAGES_COUNT ; $j++) {
  if ($j == $lastDiv) {
    $pagination .= '<span class="active">' . $j . '</span>' ;
  } else {
    $pagination .= '<a href="" onClick="moveTo(' . $lastDiv . ', ' . $j . ') ; return false ;">' . $j . '</a>' ;
  }
}

// Bouton suivant
if ($lastDiv == PAGES_COUNT) {
  $pagination .= '<span class="inactive">&raquo;</span>' ;
} else {
  $pagination .= '<a href="" onClick="moveTo(' . $lastDiv . ', ' . ($lastDiv + 1) . ') ; return false ;">&raquo;</a>' ;
}

// Fermeture des div Pagination
$pagination .= '</div>' ;
$pagination .= '</div>' ;

// Ajout du contenu de pagination
$html .= $pagination ;

}

Et voila !

Un article certes un peu long, mais je pense qui pourra dépanner !

Sur ces bonnes paroles, voici un lien vers le fichier complet de l’article !

pagination.php

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *