kaminariでページング

kaminariとは

rubyのgemの一つでページネーションを簡単に実装するためのもの

参考にさせていただいた記事

qiita.com

qiita.com

qiita.com

qiita.com

やったこと

kaminariをインストール

$ gem install kaminari

$ vi Gemfile

gem 'kaminari'

$ bundle install

kaminariの設定ファイルを作る

$ rails g kaminari:config create config/initializers/kaminari_config.rb 上記コマンドにより、config/initializers ディレクトリ直下に、以下の設定ファイルが生成される。

$ vi config/initializers/kaminari_config.rb

# 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

使いたい機能の部分のコメントアウトを外すと、自分でいろいろ設定できる☺️

ちなみに、カスタマイズしたコードは、以下の通り。 (※設定ファイルはinitializers配下に存在するファイルのため、rails sを実行してカスタマイズ内容を読み込む必要があることに注意!)

$vi config/initializers/kaminari_config.rb

# frozen_string_literal: true

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

コントローラーに以下を記述

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

hoge→使いたいページ名、viewの中の使いたいhtmlのタイトルに合わせた気がするけど、私の時は確かindexだったかな

@users→任意の変数でOK

User→使いたいデータに合わせる

ここで、よくわかっていなくて意味のわからないところにコピペしたメソッド置いてエラー出たけど冷静になって解決。

def index
~~~
end

def page
  @page= Pages.page(params[:page])
end

みたいに、どこかから引っ張ってきたメソッドをただコピペしてた…😂

使いたいviewのHTMLファイルに以下を置く

次に、viewでページネーションを表示させたいところに<%= paginate @posts %>を追加。

' $ vi app/views/posts/index.html.erb'

<%= paginate @posts %>

日本語化 もうi18nの設定が終わっていたので、今回はja.ymlファイルに以下を追加するのみ

ja:
  views:
    pagination:
      first: 最初
      last: 最後
      previous: 前
      next: 次

その他、したこと

  • 並び順が一意になるorderを設定

コントローラーの方に

@page= Pages.page.order(params[:page])

みたくした気がする

こう書いてみるとまだわからないことたくさんあるな…まあいいか

以上!備忘録でした〜🌈