Pagination sous forme de select avec boutons précédent et suivant

dimanche 21 août 2005, par Yorghos. Dernier ajout mercredi 6 décembre 2006

Le but ici est de fournir du code facilement insérable dans n’importe quelle squelette article pour gérer la pagination quelque soit le critère de tri.

Inutile d’insister sur l’importance des systèmes de pagination. Il en existe d’excellents dans SPIP, voir par exemple l’article « Pagination ».

Dans certains cas, il peut être utile de parcourir le contenu d’une rubrique page par page. De plus, l’ordre choisi peut se faire avec divers critères :
Numérotation de type 1. Titre
Ordre imposé par un numéro inscrit dans un champs, par exemple sous-titre.

Le but donc ici est de fournir du code facilement insérable dans n’importe quelle squelette article.

Explications sur le squelette proposé

Construction du tableau des id_article à partir d’une boucle qui liste les articles de la même rubrique.
Le critère de classement est ici le numéro placé dans le sous-titre. Il suffit de le remplacer par le critère de votre choix. Il est indispensable de déclarer dans une variable php la valeur de #ID_ARTICLE juste après la boucle englobante de la page article :

La boucle while permet de repérer l’id_article actuellement affiché et de sélectionner son index pour la suite.

Le deuxième bout de code concerne l’affichage du sélecteur à l’emplacement souhaité dans la page.

J’ai choisi la présentation en tableau pour le bon affichage des flèches.

<!-- ici le selecteur des pages du chapitre -->
	<table width="100%"  border="0" cellspacing="0" cellpadding="5">
		  <tr>
		  <B_pagine>
			<td width="35%" align="right" valign="top">
					<?php
					if ($rank > 0) {
					$rank_l=$rank-1;
					echo '<a href="'.$url.'?id_article='.$tabid[$rank_l].'"><<</a>';
						}
					?>
			</td>
			<td width="30%" height="12" align="center">
					<form name="choix">
					<select name="subject" onChange="javascript:Reselect();">
						<option selected>page <? echo ($rank+1); ?></option>
						<?php $key=0; 
						<BOUCLE_pagine(ARTICLES){id_rubrique}{par num soustitre}> 
						echo '<option value="'.$url.'?id_article='.$tabid[$key].'">page '.($key+1).'</option>';
						$key++;
						</BOUCLE_pagine>
						?>
					</select>
					</form>
			</td>
			<td height="12" align="left" valign="top">
					<?php
					$list_max=count($tabid);
					//echo $list_max;
					if ($rank < ($list_max-1)) {
					$rank_h=$rank+1;
					echo '<a href="'.$url.'?id_article='.$tabid[$rank_h].'">>></a>';
						}
					?>
			</td>
				</B_pagine>
		  </tr>
		</table>

Évidemment, pour la redirection du select j’utilise un petit javascript qui correspond aux noms du formulaire et du select, à copier dans l’en-tête :

function Reselect(){

idoption = document.choix.subject.value;

this.location.href = idoption;

}

Installation et Personnalisation

Le squelette est totalement générique. Ceci signifie qu’il s’insère dans tout squelette de type article, quel que soit son nom. Ceci est obtenu en appliquant une regexp sur la balise #SELF. Vous n’avez qu’à recopier le couple select_generic.php3/ select_generic.html à la racine de votre site (ou dans votre dossier squelettes), puis utiliser la syntaxe : <INCLURE(select_generic.php3){id_article}> à l’emplacement voulu d’un squelette article.
Le squelette utilise le critère {par num soustitre} pour fabriquer les liens de pagination, vous pouvez changer simplement ce critère dans la boucle au début du fichier select_generic.html s’il ne vous convient pas (et mettre par exemple {par titre}).