Blog ArobaseErreur 404 – Ou pas !

Suivez-moi !

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égralements chargés en Ajax.
De plus 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é de la tâche à effectuer :

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
    • Sous-Categorie 1
    • Sous-Categorie 2
    • Sous-Categorie 3

Lorsque je clique sur une Categorie, le menu se « déroule » et affiche les Sous-Categorie. De plus, le contenu de la première Sous-Categorie 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.

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 inseré dans une variable $html et affiché par la suite.

Ce que je vais faire ensuite, c’est créer des divs contenants 12 vignettes chacuns.
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 appeller ‘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 chacuns 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") . '">' ;

Il est temps de se rajouter les boutons « Précedent », « Suivant », etc…
Pour ce faire on va commencer par faire un peu de CSS pour rendre la chose jolie !
(Les couleurs choisient 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 ;
}

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écedent
	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 ;

}

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.

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') ;
}

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 certe un peu long, mais je pense qui pourra dépanner !

Dans la seconde partie, nous allons pousser un peu plus loin en créant une fonction qui se chargera elle-même de faire la pagination.
Et nous allons gérer le fait d’avoir un grand nombre de pages et ne pas toutes les afficher (Ex: au lieu de 1 2 3 4 5 6 7 8 nous afficherons 1 2 .. 7 8)

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

pagination.php

Cette entrée a été posté dans CSS, Développement, HTML, Javascript, jQuery, PHP et taggé , , , , . Enregistrer le permalien.

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recherche par catégorie