Coding with SPIP 2.1
SPIP 2.1 Technical Documentation

> > > > AJAX paginations

AJAX paginations

Includes which have the {ajax} criteria are used to reload only the part of the page that has been included. Most of the time, you must also include the {env} criteria whenever there is a pagination mechanism within the included code.

  1. <INCLURE{fond=inclure/file}{env}{ajax} />

When we combine this include criteria with the #PAGINATION tag, the pagination links will then automatically become AJAX links. More specifically, all of the links in the included template code are contained within a CSS class named pagination.

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

Example

List the five most recent articles. This include lists the most recent articles in groups of 5, and displays a pagination block.

  1. <INCLURE{fond=modeles/list_recent_articles}{env}{ajax} />

The file modeles/list_recent_articles.html uses:

  1. <B_art>
  2. #ANCRE_PAGINATION
  3. <ul>
  4. <BOUCLE_art(ARTICLES){!par date}{pagination 5}>
  5. <li><a href="#URL_ARTICLE">#TITRE</a></li>
  6. </BOUCLE_art>
  7. </ul>
  8. <p class="pagination">#PAGINATION</p>
  9. </B_art>

Download

Results: Ajax pagination, in groups of 5...

  1. <a id="pagination_art" name="pagination_art"/>
  2. <ul>
  3. <li><a href="Recursion,369" title="art369">Recursion</a></li>
  4. <li><a href="Parameter,368" title="art368">Parameter</a></li>
  5. ...
  6. </ul>
  7. <p class="pagination">
  8. <strong class="on">0</strong>
  9. <span class="separator">|</span>
  10. <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=5#pagination_art">5</a>
  11. <span class="separator">|</span>
  12. <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=10#pagination_art">10</a>
  13. <span class="separator">|</span>
  14. ...
  15. <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=205#pagination_art">...</a>
  16. </p>

Download

  • Author :
  • Published :
  • Updated : 27/06/10
  • Translations : English, français