ページネーションにkaminariを使う

ページネーションとは、検索結果を表示するページや記事がたくさん投稿されている場合など、ボリュームの多いWebページを複数のページに分割し、各ページへのリンクを並べることで見やすくすることです。

1. kaminariをbundle install

以下のコードをGemfileに記入してbundle install

Gemfile.

gem 'kaminari'

2. コントローラでの設定

kaminariをインストールすることによって.page(params[:page]).per(5)が使用できるようになります。1ページあたり何件表示するかは.per(5)の値を変更してください。

posts_controller.rb

@posts = Post.all.page(params[:page]).per(5)

3. viewページへ挿入

各リンクへのリストを表示したいところに以下のコードを挿入します

posts/index.htmnl.erb

<%= paginate @posts %>

4. デザインを整える

以降の操作は必須ではありませんがcssを使用してページネーションのデザインを整えていきます。

terminal

rails g kaminari:views default

とするとviewフォルダにkaminariに関連するファイルがいくつかダウンロードされます。
自分でkaminari.scssのファイルを作って以下のコードを挿入。

kaminari.scss

.pagination {
  text-align: center;

  .page {
  margin-right: 10px;
  width: 5%;
  padding-left: 10px;
  }

  .next , .last {
  padding-left: 10px;
  }
}

ja.ymlファイルも少しいじる。

config/locals/ja.yml

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

これで出来上がり！！↓

5. 参考

【Rails】 kaminariの使い方を理解してページネーションを実装しよう