[Rails] pagyを導入する

mac OS バージョン11.6
Rails 6.0.4

pagyを導入した時の備忘録です。
シンプルなのでそこまでハマらずに導入できると思います。

準備

ページネーションが表示されるには、レコードが21件以上ないと表示されません。
seed.rbで初期データを用意しておきましょう。

pagyのインストール

pagyというページネーション用のGemがあるので、インストールします。

.Gemfile

gem 'pagy'

bundle install

Controller

Controller側ではapplication_controller.rb に以下を追記します。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  include Pagy::Backend  #追記
end

次に、各movieをページネーションにしたいので、movies_controller.rbには pagy 用にMovie.allを以下のように設定します。

app/controllers/movies_controller.rb

  def index
    @pagy, @movie = pagy(Movie.all)
  end

View

app/helpers/application_helper.rbに以下を追記します。

.module ApplicationHelper

  include Pagy::Frontend
end

View側では、ページネーションを表示したいところに <%== pagy_nav(@pagy) %> を追記します。 == のように = が2つになっていることに注意しましょう。

_movies.html

<div class="container">
  <div class="movies row">
      <% @movies.each do |movie| %>
      <div class="col-md-4 col-sm-6">
          <%= link_to "/movies/#{movie["id"]}", :target => "new" do %>        
          <%= image_tag movie.image.thumb.url %>
          <h3><%= movie["title"] %></h3>
            <% end %>
      </div> 
      <% end %>
  </div> 
</div>
<%== pagy_nav(@pagy) %>

これでページネーションが表示されます。

1ページに表示するレコード数の変更

pagy ではデフォルトで1ページ20件となっていますが、変更することができます。

app/controllers/movies_controller.rb

def index
    @pagy, @movies = pagy(Movie.all, items: 10)
  end

これだと1ページに10件表示されることになります。

順番の変更

Movies一覧表示の順番を変更したい場合には、 Controller側で Movie.all を Movie.order(id: :desc) のように変更します。

app/controllers/movies_controller.rb

  def index
   @pagy, @movies = pagy(Movie.order(id: :desc), items:3)
  end

上記のように記述すると、id のカラムを基準に desc（降順）にMovie一覧が表示されます。

pagyにbootstrapを適用させる

このままだと見た目が味気ないので、Bootstrapを利用します。
そのままではpagyにbootstrapが適用できないので、まずはconfig/initializersの直下に新たにpagy.rbを作成します。

config/initializers/pagy.rb

require 'pagy/extras/bootstrap'  #追記

次に、先ほどviewで記述した<%== pagy_nav(@pagy) %>を <%== pagy_bootstrap_nav(@pagy) %>に変更します。

これでページネーションにもBootstrapが適用されました。
再度rails sで起動して確認してみましょう。