Inclusions et paginations AJAX

Inclusions ajax

Les inclusions qui possèdent le critère {ajax} permettent de recharger dans la page seulement la partie incluse. La plupart du temps, il faudra aussi inclure le critère {env} dès lors qu’il y a une pagination dans l’inclusion.

<INCLURE{fond=inclure/fichier}{env}{ajax} />

Dans l’inclusion, le rechargement ajax peut se faire au moyen d’un lien (voir Liens AJAX), d’un #BOUTON_ACTION (voir https://spip.net/4583) ou d’un formulaire ajax (voir https://spip.net/3800).

Par défaut, le rechargement ajax provoque un scroll en haut du bloc ajax. On peut toutefois modifier ce comportement :

  • définir la destination de ce scroll au moyen d’une ancre dédiée à l’intérieur du bloc rechargé :
    <a name="ajax_ancre" href="#truc"></a>
  • désactiver le scroll en utilisant une classe "noscroll" sur les liens, les #BOUTON_ACTION ou les submit des formulaires ajax qui provoquent ce rechargement.

Inclusions ajax avec pagination

Lorsque l’on couple ce critère d’inclusion avec la balise #PAGINATION, les liens de pagination deviennent alors automatiquement AJAX. Plus précisément, tous les liens du squelette inclus contenus dans une classe CSS pagination.

<p class="pagination">#PAGINATION</p>

Exemple

Lister les derniers articles. Cette inclusion liste les derniers articles par groupe de 5 et affiche un bloc de pagination.

<INCLURE{fond=modeles/liste_derniers_articles}{env}{ajax} />

Fichier modeles/liste_derniers_articles.html :

<B_art>
  #ANCRE_PAGINATION
  <ul>
    <BOUCLE_art(ARTICLES){!par date}{pagination 5}>
      <li><a href="#URL_ARTICLE">#TITRE</a></li>
    </BOUCLE_art>
  </ul>
  <p class="pagination">#PAGINATION</p>
</B_art>

Résultat : Une pagination ajax, de 5 en 5...

<a id="pagination_art" name="pagination_art"/>
<ul>
	<li><a href="Recursivite,246" title="art246">Récursivité</a></li>
	<li><a href="Parametre" title="art245">Paramètre</a></li>
	...
</ul>
<p class="pagination">
	<strong class="on">0</strong>
	<span class="separateur">|</span>
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=5#pagination_art">5</a>
	<span class="separateur">|</span>
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=10#pagination_art">10</a>
	<span class="separateur">|</span>
	...
	<a rel="nofollow" class="lien_pagination noajax" href="Paginations-AJAX?debut_art=205#pagination_art">...</a>
</p>

Auteur Gilles Vincent, Matthieu Marcillaud Publié le : Mis à jour : 12/03/23

Traductions : English, français, Nederlands