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

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 :

$i=0;
<BOUCLE_tab_rub(ARTICLES){id_rubrique}{par num soustitre}>
$tabid[$i]='#ID_ARTICLE';
$i++;
</BOUCLE_tab_rub>
while (list($key, $value)=each($tabid)) {
	if($idencours==$tabid[$key])
	{
	$rank=$key;
	}
}

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}).

Il ne vous reste plus qu’à changer éventuellement les images correspondant par exemple à des flèches comme celles de l’img_pack.

Vous pouvez voir le fonctionnement ici

updated on 6 December 2006

Discussion

2 discussions

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom