【Rails】kaminariとBootstrapを使用したページネーション

kaminariを使用したページネーションにBootstrapを適用させるやり方を復習しておきます。

前提条件

• Bootstrapは導入済み
• ビューやコントローラは作成済み
• 今回はreview投稿が例となります。

kaminariのインストール

Gemfileに以下を追記する。

Gemfile

gem 'kaminari','~> 1.2.1'

以下のコマンドを実行

$ bundle install

そして今回はBootstrap4を適応させるので、以下のコマンドを入力します。

$ rails generate kaminari:views bootstrap4

Bootstrap4以外で適応させたい場合は下記のサイトを参考にお願いします。
https://autovice.jp/articles/139

コントローラ記述

kaminariを使ってページネーションを作成するためには、コントローラの記述を変更する必要があります。
以下はページネーション作成前の記述です。

変更前

def index
  @review = Review.new
  @q = Review.ransack(params[:q])
  if params[:q].present?
    @reviews = @q.result(distinct: true)
  else
    @reviews = Review.all.order(created_at: :desc)
  end
end

以下のように記述を変更します。

変更後

def index
  @review = Review.new
  @q = Review.ransack(params[:q])
  if params[:q].present?
    @reviews = @q.result(distinct: true).page(params[:page]).per(10)  # ページネーションの設定を追加
  else
    @reviews = Review.all.order(created_at: :desc).page(params[:page]).per(10)  # ページネーションの設定を追加
  end
end

ここで、page(params[:page]).per(10)の部分は、1ページに表示するレビューの数を指定しています。

1ページ当たりの表示件数について

ページあたりに表示させる件数の設定は、Kaminariの設定ファイル（kaminari_config.rb）に記述することもできます。
しかし、コントローラで.per(10)と指定している場合、その指定が優先され、指定した値が適用されます。Kaminari Configに別の値を記述していても、コントローラの指定が優先されます。
個人的にはわざわざKaminari Configを作成しなくてもコントローラに記述するほうが簡単なのと、コントローラごとに表示数を変えられるのでこちらのほうがお勧めです。

ビューの記述

ビューファイルは以下のように記述します。

index.html.erb

<% @reviews.order(created_at: :desc).each do |review| %>
  <!-- レビューの表示 -->
<% end %>
:
<%= paginate @reviews %>
:

<%= paginate @reviews %>は、kaminariが提供するページネーションリンクを表示するためのコードです。これにより、ページネーションリンクが自動的に生成され、表示されます。

以上で完成になります。bootstrap4を組み込むことで見栄えが良くなりました。

おまけ

上記の工程で作成した際に、<%= paginate @reviews %>の記述位置によっては以下のようになってしまいます。

ページネーションリンクの下にマージンが入り込んでしまい、背景色がズレてしまいます。

修正方法として、$ rails generate kaminari:views bootstrap4のコマンド入力をした際に自動生成されるview/kaminariの中の_paginator.html.erbの中にあるulタグのclassを記述することで完成のように直せます。

view/kaminari/_paginator.html.erb

:
<ul class="pagination mb-0 pb-2">
:

上記のようにmb-0でマージンを無くし、フッターとべた付けが嫌ならpb-2のようにパディングで調整する等で解決できます。