Pagination « à la Facebook »

C’est l’occasion d’utiliser le critère {ajax} qui permet exactement ceci lors de l’appel d’une inclusion.

La doc de SPIP est comme d’habitude très claire et très précise.

Lien
-  ajax pour les inclure sur spip.net

Prenons l’exemple d’une page d’accueil où sont affichés les 5 derniers billets. Nous allons ajouter un lien « Billets plus anciens » au dessous du 5^e billet, qui déclenchera l’affichage de 5 billets supplémentaires.

Sur le squelette sommaire.html, la boucle qui affiche les 5 derniers articles se présente ainsi :

<BOUCLE_recents(ARTICLES){!par date}{0,5}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

Tout d’abord déplaçons cette boucle sur un squelette inclus inc-recentposts.html

Sur sommaire.html, le squelette est inclus avec

<INCLURE{fond=inc-recentposts}{env}{nb=#ENV{nb,5}}{ajax}>

La variable nb sert à donner le nombre d’articles à afficher [1], par défaut égal à 5, le critère {ajax} indique que seul le fichier inclus devra être rafraîchi lorsqu’on clique un lien portant la classe ajax.

Dans le fichier inclus, le critère d’itération de la boucle principale doit donc être modifié pour afficher les nb premiers articles et non les 5 premiers.

<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

Au bas de la boucle, ajoutons un lien ajaxé qui déclenche le rafraîchissement du squelette inclus en incrémentant nb de 5.

<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})]">Billets plus anciens</a><p>

A ce stade ça fonctionne, mais au moment du rafraichissement le focus revient sur le haut du fichier inclus, la page remonte au premier billet. Pour plus de lisibilité, il vaut mieux que la page reste où elle est.

Utilisons une ancre, nommée #more, placée sur le dernier élément affiché avant ajout, soit le nb-5^e post.

Pour ajouter cette ancre, l’affichage du détail des posts devient :

<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1[ (#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

L’appel ajaxé des billets supplémentaires devient donc :

<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]">Billets plus anciens</a><p>

Et voilà !

Exemple sur cette page : http://another.teacher.free.fr/