学習記録

アウトプット用に作りました

kaminariを使ってページネーションを実装

ページネーションとは

1つのページに掲載するコンテンツが多くなってしまった時、
複数ページに分けて表示させるようにしたものです。
下記のような1,2,3,4,.....のようなものです。
f:id:kimura34:20210304164104p:plain

railsではkaminariを使って、ページネーションを実装することができます。


kaminariの使い方

Gemfileにgem 'kaminari'を追加して、bundle installします。

kaminariを導入することで、
pageメソッドとperメソッドが使えるようになります。

pageメソッドページネーションにおけるページ数を指定します。
ビューのリクエストの際、paramsの中にpageというキーが追加されて、
その値がビューで指定したページ番号になります。

perメソッド1ページあたりに表示する件数を指定します。

@users = User.page(params[:page]).per(10)


ビューでページネーションが表示される場所は下記のように定義します。

<%= paginate @users %>


上記のようにコントローラ側で、設定を変えることもできますが、
まとめて専用ファイルで管理した方がわかりやすいので専用ファイルを作成します。

$ rails g kaminari:config

config/initializers/kaminari_config.rbが生成されます。

Kaminari.configure do |config|
  # config.default_per_page = 25 # 1ページあたりの表示件数
  # config.max_per_page = nil    # 1ページ辺りの最大表示件数
  # config.window = 4            # 現在のページから左右何ページ分のリンクを表示させるか
  # config.outer_window = 0      # 最初と最後のページから左右何ページ分のリンクを表示させるか
  # config.left = 0              # 最初のページから何ページ分のリンクを表示させるか
  # config.right = 0             # 最後のページから何ページ分のリンクを表示させるか
  # config.page_method_name = :page  # メソッド名
  # config.param_name = :page    # ページネーションのパラメーターの名前
end

全てコメントアウトされてるので、使いたい時は各コメントを外します。


kaminariで表示させるページネーションはビューの中でcssを当てる事が出来ません。
なのでページネーションの見た目を変えるために、
Bootstrap4を使います。

$ rails g kaminari:views bootstrap4

このコマンドを実行してビューファイルを作成すると
何も編集しなくてもそれぞれのフレームワークのスタイルを適用することができます。


kaminariを日本語化するために、
config/localesフォルダにkaminari_ja.ymlというファイルを作成します。

ja:
  views:
    pagination:
      first: "最初"
      last: "最後"
      previous: "« 前"
      next: "次 »"
      truncate: "..."

このように記述することで、
デフォルトで英語表記になっている文字を
日本語に変更することができます。