Discussion :

[Delprog]

Bonjour,

J'essaie de mettre une pagination Ajax non intrusive en place à l'aide jQuery, mais j'ai quelques petits problèmes.

Pour l'instant j'ai tout bêtement "bindé" un événement (à l'aide d'une classe) sur mes boutons de pagination sans toucher du tout au comportement d'origine, ce qui m'assure que les moteurs de recherche ou les utilisateurs sans javascript pourront quand même parcourir les pages.

Voilà l'idée :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="paginationControl paginate-ax">
      <span class="disabled">&laquo; Préc.</span>
      <span class="active">1</span>
      <a href="/photos?p=2">2</a>
      <a href="/photos?p=3">3</a>
      <a href="/photos?p=4">4</a>
      <a href="/photos?p=5">5</a>                      
      <a class="pagination-next" href="/photos?p=2">Suiv. &raquo;</a>
</div>

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var function = paginateAjax(target) {
    $('.paginate-ax a').click(function(e) {
        var link = $(this);		
        $.scrollTo('#view-title', {duration: 100});
        $.bbq.pushState({'p' : $.deparam.querystring(link.attr('href')).p}, 2);
        $.ajax({
            url: link.attr('href'),
            cache: true,
            dataType: "html",
            beforeSend: function(xmlHttpRequest) {				
	        $('#page-items').empty();
	        $('#page-items').addClass('loading');
	    },
            success: function(data) {
                ('#page-items').removeClass('loading');
                target.html(data);
                paginateAjax(target);
	    }
        });
        e.preventDefault();
    });
};

C'est tout con, une fois le DOM chargé, j'invoque une première fois la fonction paginateAjax(), le paramètre target étant l'élément html qui recevra le contenu de la réponse ajax.

Je surcharge donc l'événement click sur les liens de la pagination, et j'ajoute dans le hash de l'url un paramètre #p=numero_de_page qui est sensé me permettre d'afficher la bonne page si l'utilisateur saisi directement l'url dans son navigateur (ou fait précédent, ou un bookmark, etc.).

Tout con, mais ça me pose des problèmes. Le pb c'est que dans le cas où l'utilisateur revient sur une url avec le hash #p, je ne peux pas le savoir côté serveur, la requête va donc se faire, et se re-faire une deuxième fois quand le javascript va détecter le hash et invoquer une requête ajax.

A partir de là, je ne sais pas vraiment comment faire une pagination ajax non intrusive, parce qu'il faudrait que la page soit appelé seulement une fois le dom chargé pour pas que la requête soit effectuée 2x sur le serveur.

Si vous avez des idées ? ou une expérience sur le sujet


Merci.

A+ benjamin.

[danielhagnoul]

Bonsoir.

Il manque un $ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
success: function(data) {
	$('#page-items').removeClass('loading');
	target.html(data);
	paginateAjax(target);
}

[Delprog]

C'est une erreur de frappe...