Symfony 2: plusieurs pagerfanta en ajax

Je me suis récemment posé la question de  comment faire pour avoir plusieurs pagerfanta dans la même page lorsque l’on fait un site sous Symfony2. Cerise sur le gâteau, la page doit afficher des tableaux (ceux à paginer) en AJAX.

Pour information, pagerFanta est par défaut prévu pour utiliser des paramètre en POST/GET dans l’url.

Plusieurs solutions simples s’offrent à vous :

  • Avoir un paramètre par pager et passer les urls du style http://www.exemple.com/shop?productsPage=2&categoryPage=3&userPage=4&otherPager=5. Très moche !
  • Faire des sous-pages avec des iframes. Encore pire !
  • Utiliser une seule variable pour la pagination et accepter le fait que tout les pagers avancent et reculent de façon synchronisée. Envisageable, mais pas terrible en terme d’expérience utilisateur. En plus il vous faudra gérer les cas où tous les pagers n’ont pas le même nombre de pages, ce qui est plus que probable

 

Donc la solution n’est pas là. Il va falloir chercher un peu plus compliqué. Voici ma solution détaillée :

Le principe est simple. Avoir un contrôleur par pager voulu. Et utiliser à la fois le rendu des fragments introduit dans symfony 2.2 et des appels asynchrones en Ajax (jquery en l’occurrence).

Il nous faut donc :

Un contrôleur pour chaque pager

 Un template pour notre tableau

 Inclure le template dans notre template global:

Nb: j’utilise ici la stratégie hinclude qui permet d’avoir un rendu asynchrone lors du chargement de la page. Résultat la page est plus rapide à s’afficher compte tenu du nombre de tableaux c’était un must-have.

Une fonction Javascript:

Et pour lier tout çà une route dans mon fichier de configuration :

Voilà le tour est joué. Lorsque vous cliquez sur un des liens, le pager va automatiquement avancer sans que vous ne voyez rien dans l’url. La méthode étant extensible à souhait avec 2,3, 10 pagers 🙂

N’hésitez pas à me faire des retours si vous trouvez le code perfectible ou discutable.

Frederic pour webofmars

4 Comments. Leave new

Merci,

Un trés bon tuto, merci Frederic 🙂

Répondre

Merci Samy !

Répondre

Mériterai un coup de jeune mais bien pour l’inspiration !

Répondre
Frederic Leger
16 août 2020 14 h 27 min

Merci Steeve. Bon en même temps Symfony2 le meilleur coup de jeune possible c’est de passer à SF5 😉 Si je suis amené à travailler sur un sujet pareil en SF5 je ferai un update en tout cas.

Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.