[RUBY] Créer une fonction de pagination avec Rails Kaminari

version

・ Rubis 2.6.6 ・ Rails 5.2.4.1

Implémentation de gem'kaminari '

Lors de la création d'une application avec une fonction de publication, la fonction de pagination est également essentielle pour l'UX. Par conséquent, nous allons implémenter la fonction de pagination en utilisant Kaminari de la gemme.

Ajoutez d'abord kaminari au Gemfile et lancez l'installation du bundle

`Gemfile`


gem 'kaminari', '~> 1.2.0'

`Terminal`


bundle install

Fixer le contrôleur

Si vous avez déjà créé une fonctionnalité de publication et avez une page de liste de publications, vous devez modifier le contrôleur. Le contrôleur dans la page de liste de messages d'origine est le suivant.

`controllers/posts_controller.rb`


def index
 @posts = Post.all
end

Modifiez-les comme suit.

`controllers/posts_controller.rb`


def index
 @posts = Post.page(params[:page]).per(10)
end

Avec l'ajout de Kaminari, vous pouvez utiliser la page de méthodes et par sur chaque modèle. Passez le nombre actuel de pages dans l'argument de la méthode page, et passez le nombre de pages à diviser dans l'argument de per. Ici, je mets 10 dans l'argument de per, mais si vous voulez séparer les pages par 8 éléments, définissez l'argument sur 8.

Afficher les modifications

Lors de l'affichage de la page de liste des articles, je pense qu'il est courant d'utiliser chaque instruction, mais elle est utilisée dans ruby Ajoutez <% = pagenate @ posts%> après <% end%>. Lorsque vous utilisez haml, il semble préférable d'écrire = paginate @posts à la fin de la liste. Pour plus de détails, il y a des gens qui écrivent des articles en utilisant haml, alors veuillez vous y référer.

`ruby:views/posts/index.html.erb`


 <% @posts.each do |post| %>
           .
           .
           .
 <% end %>
 <%= pagebate @posts %>

S'il n'y a pas d'erreurs jusqu'à présent, le lien pour la pagination sera affiché automatiquement et la fonction de pagination peut être implémentée. Cependant, je ne pense pas que le design soit facile à voir. Par conséquent, utilisez Bootstrap pour organiser la conception. Si vous avez déjà installé Bootstrap, ignorez l'étape suivante.

Présentation de Bootstrap

Il existe deux façons d'installer Bootstrap, telles que l'installation à l'aide de fil et le téléchargement à partir du site Web officiel de Bootstrap, mais cette fois, nous expliquerons l'utilisation de la méthode CDN. Si vous n'êtes pas à l'aise avec juste l'explication ici, https://www.youtube.com/watch?v=YY0mEyggH1E&t=713s Il y a une vidéo qui explique comment l'installer, alors jetez-y un œil.

Il y a deux étapes à suivre. La première consiste à écrire le code sur le site officiel à la fin de la balise head.

`ruby:layouts/application.html.erb`


<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

La seconde consiste à écrire le code sur le site officiel à la fin de la balise body

`ruby:layouts/application.html.erb`


<body>

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>

Ceci termine l'installation.

Générer un modèle de vue pour Bootstrap 4

kaminari a des thèmes qui peuvent être utilisés dans Bootstrap et la fondation. Si vous exécutez le code suivant dans le terminal, un modèle de vue pour Bootstrap 4 sera généré sous "app / views / kaminari". Cette vue a la priorité sur la vue par défaut de kaminari.

`Terminal`


rails g kaminari:views bootstrap4

Une fois terminé, le design aura fière allure. Si cela ne fonctionne pas, essayez de redémarrer le serveur.

De plus, si vous n'aimez pas la notation anglaise, vous pouvez utiliser la notation japonaise. Ajoutez "config / locales / kaminari_ja.yml" et écrivez comme suit.

`config/locales/kaminari_ja.yml`


ja:
  views:
      pagination:
        first: 'la première'
        last: 'dernier'
        previous: 'Avant'
        next: 'Suivant'
        truncate: '...'

Si le japonais n'est pas appliqué jusqu'à présent, ajoutez config.i18n.default_locale =: ja dans "config / application.rb". Dans l'ensemble, cela ressemble à ceci:

`config/application.rb`


require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Theclo
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
    config.i18n.default_locale = :ja
    config.time_zone = 'Tokyo'
  end
end

Ceci termine la mise en œuvre. Si cela ne fonctionne pas, essayez de redémarrer le serveur. J'espère que cela sera utile à tout le monde.