Logo ajax web developpement

Pagination en Ajax sous WordPress ou ailleurs

 

Logo de jQuery et Ajax

Tutoriel sur la pagination en Ajax

Dans cet article, je vais vous présenter la réalisation d’une pagination en Ajax sous WordPress ou sur n’importe quel autre site internet. Vous verrez, c’est tout simple.

La pagination ou navigation en Ajax permet de charger du contenu sans devoir rafraîchir la page, cela rend le site plus dynamique, attractif et réactif pour l’utilisateur. C’est vraiment un plus non négligeable.

Ce tutoriel est présenté pour WordPress mais il reste facilement applicable pour tout autre site, il suffit d’adapter les div qui encadrent le contenu et la pagination en question.

Imaginons le code suivant comme étant le résultat HTML d’un loop et d’une fonction de pagination sous WordPress. Si vous désirez plus d’informations concernant le loop et la pagination, n’hésitez pas à le demander dans les commentaires…

 La partie HTML :

<section class="home-main">
  <h2>Actualités</h2>
  <div id="data-posts">
    <article id="post-106" class="excerpt">
      <a href="http://monsite.com/article-1/" title="Article 1">
        <img src="https://placehold.it/140x140" alt="">
      </a>
      <div class="extra_wrapper">
        <h3><a href="http://monsite.com/article-1/" title="Article 1">Article 1</a></h3>
        <p>Contenu de l'article 1 <a class="view-article" href="http://monsite.com/article-1/">Voir l'article</a></i></p>		
      </div>
    </article>
    <article id="post-104" class="excerpt">
      <a href="http://monsite.com/article-2/" title="Article 2">
        <img src="https://placehold.it/140x140" alt="">
      </a>
      <div class="extra_wrapper">
        <h3><a href="http://monsite.com/article-2/" title="Article 2">Article 2</a></h3>
        <p>Contenu de l'article 2<a class="view-article" href="http://monsite.com/article-2/">Voir l'article</a></i></p>		
      </div>
    </article>
    <article id="post-91" class="excerpt">
      <a href="http://monsite.com/article-3/" title="Article 3">
         <img src="https://placehold.it/140x140" alt="">
      </a>
      <div class="extra_wrapper">
        <h3><a href="http://monsite.com/article-3/" title="Article 3">Article 3</a></h3>
        <p>Contenu de l'article 3<a class="view-article" href="http://monsite.com/article-3/">Voir l'article</a></i></p>
      </div>
    </article>
  </div>

  <div class="pagination">
    <ul>
      <li><a href="http://monsite.com/" class="page-numbers current">1</a></li>
      <li><a href="http://monsite.com/page/2/" class="page-numbers">2</a></li>
      <li><a href="http://monsite.com/page/3/" class="page-numbers">3</a></li>
    </ul>
  </div>
</section>

C’est donc une DIV avec un ID #data-posts qui reprend chaque article dans la class .excerpt. L’idée de la pagination en Ajax, consiste à réaliser une action lorsque l’on clique sur une class .page-numbers de la pagination.

Cette action, devra :

  1. effacer le contenu de #data-posts,
  2. charger le nouveau contenu grâce à l’url de la pagination,
  3. placer le nouveau contenu dans #data-posts.

Pour réaliser tout cela, nous allons utiliser jQuery (n’oubliez pas de le charger préalablement évidemment…)

La partie jQuery :

$('.pagination ul li:first-child a').addClass("current");
$('.page-numbers').click(function(event){
  event.preventDefault()
  $('.page-numbers').removeClass("current");
  $(this).addClass("current");
  var link = $(this).attr('href');
  $('#data-posts').html('<img src="wp-content/themes/montheme/img/load.gif" class="load">');
  $('#data-posts').load(link+' .excerpt');
});

Voyons ensemble chaque ligne :

Voilà qui est terminé. Si vous désirez une démonstration ou si certains points ne sont pas clairs, n’hésitez pas à poster un commentaire. Je me ferais une joie d’y répondre.

 

 

Étiquettes : , , ,