In einem kürzlich erschienenen Beitrag auf dem Blog von Imaginary Cloud Tiago über Pagygesprochen, den neuen, hochperformanten Newcomer für die Paginierung in Rails (oder eigentlich jedem Rack-basierten Ruby-Framework).
Dieser Folgeartikel ist eine Anleitung, die das integrierte compact -Extra verwendet, welches über den pagy_nav_bootstrap_compact -Helper eine neue Art von Benutzeroberfläche bietet und diese leicht an unsere Bedürfnisse anpasst.
Ich verwende eine kleine Beispielanwendung mit Testdaten, die mit dem Faker-Gem generiert wurden, um die Fähigkeiten von Pagy zu demonstrieren. Sie können sich ansehen, was wir bauen werden, und den Code auf GitHubeinsehen.
Neben dem Standard-Frontend-Helper pagy_nav, der eine sehr einfache Paginierung erzeugt, gibt es zwei weitere (compact, Bootstrap), falls Sie also eine andere Art der Paginierung verwenden oder ganz auf Bootstrap verzichten möchten, ist das absolut kein Problem.
Fügen Sie zunächst Pagy zu Ihrem Gemfile hinzu und führen Sie bundle install:
gem 'pagy', '~> 0.8.1'Fügen Sie die Daten der Anwendung zur Datenbank hinzu:
rake db:seedErstellen Sie den pagy.rb Initializer für die App:
# load the compact UI extra
require 'pagy/extras/compact'
# set the default items per page
Pagy::VARS[:items] = 10Binden Sie das Pagy-Backend in einen Controller ein, um es dort verfügbar zu machen, oder in den ApplicationController , um es global verfügbar zu machen:
include Pagy::BackendJetzt sind Sie bereit, Ihre ActiveRecord-Sammlungen in Controllern zu paginieren, die das Pagy-Backend enthalten. Das wären alle Controller, die von Ihrem ApplicationController erben, falls Sie es dort eingebunden haben. Angenommen, Sie haben eine Index-Aktion, die einige Weltraumnebel anzeigt, die Sie paginieren möchten, könnten Sie dies wie folgt tun:
@pagy, @nebulae = pagy(Nebula.all)Binden Sie das Frontend in einen Helper oder in ApplicationHelper um es global verfügbar zu machen:
include Pagy::FrontendUm Ihre paginierten Inhalte anzuzeigen, können Sie jetzt einen der Frontend-Helfer von Pagy wie folgt verwenden:
<%== pagy_nav_bootstrap_compact @pagy %>Standardmäßig pagy_nav_bootstrap_compact rendert in etwa Folgendes:
Sie können die Textbeschriftungen anpassen, wenn Sie require 'pagy/extra/i18n' in einem Initializer verwenden, das Standard-Pagy-Wörterbuch in Ihr Verzeichnis config/locales kopieren und die Beschriftungen nach Belieben ändern oder übersetzen.
Über den Initializer können Sie zudem Optionen wie die Anzahl der Elemente pro Seite und vieles mehr festlegen.
Um das Styling anzupassen, können wir ein wenig SASS verwenden:
.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: transparentDies wird @extend Bootstraps btn-outline-dark Stil übernehmen, den Text der Zurück-/Weiter-Schaltflächen durch Pfeilsymbole ersetzen und das input-Element gestalten.
Manchmal ist es notwendig, mehrere Sammlungen pro Controller-Aktion zu paginieren.
Im folgenden Beispiel rendere ich zwei Sammlungen, Sterne & Nebel, auf einer Seite innerhalb von zwei Bootstrap-Tabs.
Mit Pagy ist es einfach, jede davon separat zu paginieren und zu navigieren.
Innerhalb der Controller-Aktion, in der ich die Pagy-Sammlungen definiere, muss lediglich ein page_param mit einem Symbol meiner Wahl zu jeder Sammlung hinzugefügt werden:
@pagy_stars, @stars = pagy(Star.all, page_param: :page_stars)
@pagy_nebulae, @nebulae = pagy(Nebula.all, page_param: :page_nebulae)Jetzt stellt Pagy diesen Parameter automatisch den Navigationslinks voran und extrahiert ihn beim Rendern einer Ansicht aus der URL. Extrem einfach und komfortabel!
Um auch den Status des aktuell aktiven Tabs beizubehalten, können wir die Pagy-Option nutzen, um beliebige Parameter hinzuzufügen:
@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' })
Dieser Parameter kann für Bootstrap-Tabs verwendet werden .nav-links und .tab-pane indem ihr aktiver Status über eine Bedingung festgelegt wird:
<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">
Sterne
</a>
</li>
<li>
<a class="nav-link <%= 'active' if params[:active_tab] == 'nebulae' %>" data-toggle="tab" href="#nebulae">
Nebel
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane <%= 'active' unless params[:active_tab] == 'nebulae' %>" id="stars">
…
</div>
Wir können nun nicht nur auf bestimmte Seiten für jeden Tab verlinken, sondern auch den aktuell geöffneten Tab beibehalten, selbst wenn Besucher Links zu unserer Website kopieren und einfügen. Praktisch!
Wie ich hoffe, dieser Artikel hilft, hervorzuheben, ist Pagy nicht nur sehr performant (siehe vorheriger Beitrag über Pagy), aber auch sehr komfortabel zu bedienen und einfach zu personalisieren.
Dinge wie das Umbenennen des Seitenparameters sind meiner Meinung nach mit Pagy noch einfacher zu bewerkstelligen als mit will_paginate oder Kaminari.
Die Zeit wird zeigen, ob Pagy das Juwel der Wahl für Rails wird, wenn es um Paginierung geht. Ich denke sicherlich, dass es das Potenzial hat, genau das zu werden.
Bei Imaginary Cloud wir arbeiten mit einem breiten Tech-Stack, einschließlich Ruby on Rails. Wenn Sie in Ihrem Softwareentwicklungsprojekt Hilfe mit dieser oder ähnlichen Technologien benötigen, wartet ein Expertenteam auf Sie! Schreiben Sie uns eine Nachricht hier!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Ein Unternehmer aus Bayern, der derzeit an Web- und Mobile-App-Software für das Qualitätsmanagement arbeitet. Ich mag Ruby on Rails und React Native sehr.
People who read this post, also found these interesting:
