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.

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

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

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

The file modeles/list_recent_articles.html uses:

<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>

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

<a id="pagination_art" name="pagination_art"/>
<ul>
    <li><a href="Recursion,369" title="art369">Recursion</a></li>
    <li><a href="Parameter,368" title="art368">Parameter</a></li>
    ...
</ul>
<p class="pagination">
    <strong class="on">0</strong>
    <span class="separator">|</span>
    <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=5#pagination_art">5</a>
    <span class="separator">|</span>
    <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=10#pagination_art">10</a>
    <span class="separator">|</span>
    ...
    <a rel="nofollow" class="link_pagination noajax" href="Paginations-AJAX?debut_art=205#pagination_art">...</a>
</p>

Author Mark Baber Published : Updated : 27/06/10

Translations : English, français