ページネーションを実装する

kaminari

ページネーションを簡単に実装できるkaminariというジェムを使う⚡️

gem 'kaminari'

ジェムをインストール後、コマンドでデフォルトの構成ファイルを作成することができる。

bundle exec rails g kaminari:config

config/initializersディレクトリ配下に生成される。デフォルトで設定されている数値を編集することで、好きな値に変更できる。

# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

↑全部は理解できなかったので、使いそうなところだけまとめてみる

１ページあたりの表示件数

1行目のconfig.default_per_page = {この値を変更}することで編集できる。

コントローラで個別に設定する場合

def index
  @users = User.page(params[:page]).per(10) 
# .per()をコントローラに記載するか設定ファイルに記載するかの違い

pageとperはkaminariで定義されたメソッド。
perメソッド・・・１ページあたりの表示件数は何件にするか
pageメソッド・・・何ページ目を表示させるのか
kaminari_config.rbの数字が優先される
kaminari_config.rb >= コントローラ

paginate_arrayメソッド

Arrayクラスのオブジェクトに対しては、paginate_arrayというメソッドを使用することで、ページネーションの作成が可能。

@users = Kaminari.paginate_array(配列).page(params[:page])

ページネーションの実装

①コントローラにページングの処理を追加する

@user = User.order(:name).page(params[:page])

↑後述する理由でorderを使い名前順に指定

② ビューのページネーションを表示したい箇所に下記を記載

<%= paginate @users %>

↑デザインを指定していないのでかなり簡素な見た目をしているけれど、リンクを押すとページが遷移する。ページ数が増えるともっとページネーションっぽいのかもしれない。

↓試しに１ページあたり二件しか表示しない設定にしたらこんな感じになった。

うーん・・・
デザインを当てていきます。

ちなみに「 .page(params[:page])」は何をしているのか

@user = User.page(1)

もし↑の形だったならば、Userの1ページ目だけを取得している記載になるのでページネーションのリンクを踏んでも別のページには遷移できない。（params[:page]として任意のページ番号を送れないから。（後述））

@user = User.page(params[:page])

つまり↑の場合はユーザーのparams[:page]ページ目を取得しているらしい。

たぶんページネーションで表示されたボタンを押すと、任意のページ数がパラメータとして送られて、(params[:page])で取得されたページがpageメソッドで表示されるみたいなギミックなんだと思う💡

kaminariは順序を追加しないので、使用する際はorderで順序付けて使うのが一般的らしい。

@user = User.order(:name).page(params[:page])

ページネーションの見た目を変える

kaminariで表示させるページネーションはビューの中でcssを当てることはできないらしい。

公式に記載されているrails g kaminari:views {ダウンロードしたいviewテンプレ}コマンドを使うとエラーが出てしまった。

$ bundle exec kaminari:views bootstrap4
bundler: command not found: kaminari:views
Install missing gem executables with `bundle install`

★コマンドの入力ミスしているだけだった。rails gが抜けている😭

別のやり方

gem 'bootstrap4-kaminari-views'

上のジェムを使ってbootstrapのデザインを当てるやり方があったので、そちらも試してみる。

<%= paginate @users, thema: 'twitter-bootstrap-4' %>

↑ジェムインストール後、先ほどのページネーション表示の記載にテーマを指定するだけ

見た目がそれらしくなった。

解答例に色々あったので時間ある時に調べてみたい
To be continue>>

おまけ

kaminariの翻訳ファイル

en:
  views:
    pagination:
      first: "&laquo; First"
      last: "Last &raquo;"
      previous: "&lsaquo; Prev"
      next: "Next &rsaquo;"
      truncate: "&hellip;"
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: "No %{entry_name} found"
          one: "Displaying <b>1</b> %{entry_name}"
          other: "Displaying <b>all %{count}</b> %{entry_name}"
      more_pages:
        display_entries: "Displaying %{entry_name} <b>%{first}&nbsp;-&nbsp;%{last}</b> of <b>%{total}</b> in total"

使えるメソッド（今は使わないけど色々ある）

ページ番号やページの状態を下記メソッドで取得できる

User.count                     #=> 1000
User.page(1).limit_value       #=> 20
User.page(1).total_pages       #=> 50
User.page(1).current_page      #=> 1
User.page(1).next_page         #=> 2
User.page(2).prev_page         #=> 1
User.page(1).first_page?       #=> true
User.page(50).last_page?       #=> true
User.page(100).out_of_range?   #=> true