【Rails】ページネーション「kaminari」と「bootstrap」を使用してカスタマイズ！

はじめに

kaminariというGemには、BootstrapなどのCSSフレームワークのテンプレートファイルが用意されています。
CSSフレームワークのクラスを手動で付与しなくても、専用コマンドを実行するだけで簡単にテンプレートファイルを実装できます。

※Rails6を使用しています。
※bootstrap導入済み

完成イメージ

Getting Started

①Kaminariをインストールする

ページネーション機能の実装には、gemの「kaminari」を使う。

Gemfile

:
:

gem 'kaminari','~> 1.2.1'

②bundle installする

terminal

$ bundle install

③kaminariの設定ファイルを作成する

terminal

$ rails g kaminari:config

④bootstrapのテンプレートを作成します

terminal

$ rails g kaminari:views bootstrap4

下準備が完了！

次に、表示させたいviewとcontrollerに記述をしていきます。
※変数名は、変更お願いします。

controllerへの記述

変更前

notes_controller.rb

  def index
    @notes = Note.all
  end

変更後

indexアクションの中では、notesテーブル内の全データが取得されていました。
これを、1ページ分の決められた数のデータだけを、新しい順に取得するように変更しています。
pageメソッドは、kaminariをインストールしたことで使用可能になったメソッドです。

notes_controller.rb

  def index
    @notes = Note.page(params[:page]).per(10)  
  end

Viewへの記述

表示させたい場所に、以下を記述する。

notes/index.html

<% @notes.each do |note| %>

:
:

<% end %>
<%= paginate @notes %>　#ここへ記述

③で作成したkaminariの設定ファイルを使用するため、一番上のコメントアウト外す。

config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
    config.default_per_page = 5
  # 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ページの表示件数は、デフォルトは25件ですが、今回は5件に設定します。
変更する事によって、ページネーションを使用したい部分が全て5件超過する事で起動します。
しかし今回の場合、controllerで、per(10)を指定しているため、こちらが優先されて
10件超過すれば、ページネーションが起動します。

追加

defaultとmaxを理解しょう

defaultは、controllerに直接書いている記述が優先されます。

 config.default_per_page = 5

maxは、最大値が今回の場合8件に指定しているので、controllerで10件指定していても、
8件取得した時点でページネーションが起動します。

config.max_per_page = 8

まとめ

簡単に整ったページネーションが完成することができました。
さまざまな、テンプレートファイルが用意されているためお気に入りの一つを選び実装できます。