Dans un article récent sur le blog d'Imaginary Cloud, Tiago a parlé de Pagy, le nouveau venu ultra-performant en matière de pagination pour Rails (ou tout autre framework Ruby basé sur Rack).
Ce suivi est un guide pratique utilisant l'extension intégrée compact , qui propose un nouveau type d'interface utilisateur via le helper pagy_nav_bootstrap_compact , en l'adaptant légèrement à nos besoins.
Je vais utiliser une petite application exemple avec des données de test générées par la gem Faker pour démontrer les capacités de Pagy. Vous pouvez voir ce que nous allons construire et inspecter le code sur GitHub.
Outre le helper frontend par défaut pagy_nav, qui génère une pagination très basique, il en existe deux autres (compact, bootstrap), donc si vous souhaitez utiliser un autre type de pagination ou vous passer de Bootstrap, c'est tout à fait possible.
Commencez par ajouter Pagy à votre Gemfile, puis exécutez bundle install:
gem 'pagy', '~> 0.8.1'Ajoutez les données de l'application à la base de données :
rake db:seedCréez l'initialiseur pagy.rb pour l'application :
# load the compact UI extra
require 'pagy/extras/compact'
# set the default items per page
Pagy::VARS[:items] = 10Incluez le backend Pagy dans un contrôleur pour le rendre disponible localement, ou dans ApplicationController pour le rendre disponible globalement :
include Pagy::BackendVous êtes maintenant prêt à paginer vos collections ActiveRecord dans les contrôleurs qui incluent le backend Pagy, ce qui correspond à tous les contrôleurs héritant de votre ApplicationController si vous l'y avez inclus. Supposons que vous ayez une action index affichant des nébuleuses que vous souhaitez paginer, vous pouvez procéder comme suit :
@pagy, @nebulae = pagy(Nebula.all)Incluez le frontend dans un helper ou dans ApplicationHelper pour le rendre disponible globalement :
include Pagy::FrontendPour afficher votre pagination, vous pouvez désormais utiliser l'un des helpers frontend de Pagy, comme ceci :
<%== pagy_nav_bootstrap_compact @pagy %>Par défaut, pagy_nav_bootstrap_compact affichera quelque chose comme ceci :
Vous pouvez adapter les libellés textuels si vous require 'pagy/extra/i18n' dans un initialiseur, copiez le dictionnaire Pagy standard dans votre dossier config/locales et modifiez ou traduisez les libellés comme bon vous semble.
Via 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 :
.pagy-nav-bootstrap-compact
@extend .justify-content-center
position: relative
margin: 60px 0 40px
.prev,
.next,
.pagy-compact-input
@extend .btn-outline-dark
.prev,
.next,
font-family: FontAwesome
font-size: 1.25rem
line-height: 1.3rem
padding-right: 1rem
padding-left: 1rem
&.disabled
color: $gray-light
.pagy-compact-input
color: $body-color !important
opacity: 1
background: transparent !important
input
@extend .form-control
display: inline
font-weight: bold
width: auto !important
background: transparentCela va @extend le style btn-outline-dark de Bootstrap, remplacer le texte des boutons précédent/suivant par des icônes de flèches et styliser le champ input.
Il est parfois nécessaire de paginer plusieurs collections pour une même action de contrôleur.
Dans l'exemple suivant, je vais afficher deux collections, Étoiles et Nébuleuses, sur une seule page à l'aide de deux onglets Bootstrap.
Avec Pagy, il est facile de paginer et de naviguer dans chacune d'elles séparément.
Dans l'action du contrôleur où je définis les collections Pagy, il suffit d'ajouter un page_param avec le symbole de mon choix à chaque collection :
@pagy_stars, @stars = pagy(Star.all, page_param: :page_stars)
@pagy_nebulae, @nebulae = pagy(Nebula.all, page_param: :page_nebulae)Désormais, Pagy ajoutera automatiquement ce paramètre aux liens de navigation et l'extraira de l'URL lors du rendu de la vue. C'est extrêmement simple et pratique !
Pour maintenir également l'état de l'onglet actif, nous pouvons utiliser l'option de Pagy permettant d'ajouter des paramètres arbitraires :
@pagy_stars, @stars = pagy(Star.all, page_param: :page_stars, params: { active_tab: 'stars' })
@pagy_nebulae, @nebulae = pagy(Nebula.all, page_param: :page_nebulae, params: { active_tab: 'nebulae' })
Ce paramètre peut être utilisé pour les onglets Bootstrap .nav-links et .tab-pane en définissant leur état actif avec une condition :
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link <%= 'active' unless params[:active_tab] == 'nebulae' %>" data-toggle="tab" href="#stars">
Étoiles
</a>
</li>
<li>
<a class="nav-link <%= 'active' if params[:active_tab] == 'nebulae' %>" data-toggle="tab" href="#nebulae">
Nébuleuses
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane <%= 'active' unless params[:active_tab] == 'nebulae' %>" id="stars">
…
</div>
Nous pouvons désormais non seulement créer des liens vers des pages spécifiques pour chaque onglet, mais aussi conserver l'onglet ouvert même lorsque les visiteurs copient et collent des liens vers notre site. Pratique !
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!
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
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.
People who read this post, also found these interesting:
