Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Chris Seelus

Min Read

2 janvier 2023

Ruby on Rails : paginez des onglets avec état avec Pagy

Dans un post récent sur le blog Imaginary Cloud, Tiago a parlé de Récolte, le nouveau modèle très performant en matière de pagination dans Rails (ou dans n'importe quel framework Ruby basé sur Rack).

Customized-Pagy-Navigation-Examples

Ce suivi est un guide pratique, utilisant le compact supplémentaire qui offre un nouveau type d'interface utilisateur via le payy_nav_bootstrap_compact assistant, en l'adaptant un peu à nos besoins.

J'utiliserai un petit exemple d'application contenant des données de test générées avec la gemme Faker pour démontrer les capacités de Pagy. Vous pouvez voir ce que nous allons construire et inspecter code sur GitHub.

Outre l'assistant frontal par défaut pagy_nav, qui générera une pagination très basique, il en existe deux autres (compact, lacet), donc si vous voulez utiliser un autre type de pagination ou vous passer de Bootstrap, c'est parfaitement bien aussi.

blue arrow to the left
Imaginary Cloud logo

Installation

Tout d'abord, ajoutez Pagy à votre Gemfile et lancez installation du bundle:

Ajoutez les données de l'application à la base de données :

Créez le paiement.rb initialiseur pour l'application :


Incluez le backend Payy dans un contrôleur pour le rendre disponible juste là ou à l'intérieur Contrôleur d'application pour le rendre disponible dans le monde entier :

Vous êtes maintenant configuré pour paginer vos collections ActiveRecord dans des contrôleurs qui incluent le backend Pagy, qui serait composé de tous les contrôleurs héritant de votre Contrôleur d'application si vous l'avez inclus. Supposons que vous ayez une action d'indexation qui affiche une nébuleuse spatiale que vous souhaitez paginer, vous pouvez le faire de cette façon :

Incluez le frontend dans un assistant ou dans Aide à l'application pour le rendre disponible dans le monde entier :

Pour afficher votre nébuleuse paginée√ ¶, vous pouvez désormais utiliser l'un des assistants frontaux de Pagys, comme suit :

Personnalisation de la pagination

Par défaut, payy_nav_bootstrap_compact va rendre quelque chose comme ceci :

Pagy Nav Bootstrap Compact

Vous pouvez adapter les libellés de texte si vous nécessite « payy/extra/i18n » dans un initialiseur, copiez le dictionnaire Payy standard dans votre config/locales et modifiez ou traduisez les étiquettes comme vous le souhaitez.

Grâce à l'initialiseur, vous pouvez également définir des options telles que le nombre d'éléments par page et bien plus encore.

Pour adapter le style, nous pouvons utiliser un peu de SASS :


Ce sera @extend Bootstraps btn-outline-dark style, remplacez le texte des boutons précédent/suivant par des icônes en forme de flèche et stylisez le entrée.

blue arrow to the left
Imaginary Cloud logo

Paginez plusieurs collections à la fois

Il est parfois nécessaire de paginer plusieurs collections par action du contrôleur.

Dans l'exemple suivant, je vais afficher deux collections, Stars & Nebulae, sur une page à l'intérieur de deux onglets Bootstrap.

Avec Pagy, il est facile de paginer et de parcourir chacune d'entre elles séparément.

Dans l'action du contrôleur où je définis les collections Pagy, il suffit d'ajouter un paramètre_page avec un symbole de mon choix pour chaque collection :


Désormais, Pagy ajoutera automatiquement ce paramètre aux liens de navigation et les extraira d'une URL lors du rendu d'une vue. Extrêmement facile et pratique !

blue arrow to the left
Imaginary Cloud logo

Maintien de l'État

Pour conserver également l'état de l'onglet actuellement actif, nous pouvons utiliser l'option de Pagy pour ajouter des paramètres arbitraires :


Ce paramètre peut être utilisé pour les onglets Bootstraps .nav-liens et .tab-pane en définissant leur état actif avec une condition :


Nous pouvons désormais non seulement créer des liens vers certaines pages pour chaque onglet, mais également conserver l'onglet actuellement ouvert même lorsque les visiteurs copient et collent des liens vers notre site Web. Super !

blue arrow to the left
Imaginary Cloud logo

Conclusion

Comme j'espère que cet article vous aidera à le souligner, Pagy n'est pas seulement très performant (voir post précédent à propos de Pagy) mais également très confortable à utiliser et facile à personnaliser.

Des choses comme renommer le paramètre de page sont à mon avis encore plus simples à faire avec Pagy qu'avec will_paginate ou Kaminari.

Le temps nous dira si Pagy deviendra le joyau incontournable de Rails en matière de pagination, je pense certainement qu'il a le potentiel de le devenir.

À Imaginary Cloud nous travaillons avec un large éventail de technologies, y compris Ruby on Rails. Si vous avez besoin d'aide avec cette technologie ou des technologies similaires dans le cadre de votre projet de développement logiciel, nous avons une équipe d'experts qui vous attend ! Envoyez-nous un message ici!

Ready for a UX Audit? Book a free call

Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Chris Seelus
Chris Seelus

Un entrepreneur de Bavière qui travaille actuellement sur un logiciel basé sur des applications Web et mobiles pour la gestion de la qualité. J'aime beaucoup Ruby on Rails et React Native.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon