kaminariを使ってページング処理を実装Rails

2024年3月29日 17:19

kaminari gemを使用してページング処理（ページネーション）の実装方法を紹介。

実行環境

macOS: Monterey 12.7.4
Ruby: 3.2.0
Rails: 7.0.8
kaminari: 1.2.2

手順

1. kaminari gem のインストール

使用するアプリのGemfileに追記。

gem 'kaminari'

ターミナルで以下コマンドを実行してkaminari gemをインストール。

bundle install

2. ページネーションの実装

該当のコントローラーに記載。(Bookモデルを使用)
app/controllers/books_controller.rb

class BooksController < ApplicationController
  def index
    @books = Book.page(params[:page])
  end
end

次に、ページネーションを置きたいviewファイルに以下記載。
app/views/books/index.html.erb

<%= paginate @books %>

これで、基本的なページネーションの実装は完了。カンタン！

3. kaminariのデフォルトの設定値と変更

デフォルトでは1ページにつき、25個のコンテンツ（表示させたいデータ）が入るようになっている。

例えば、1ページ10個に変更したい場合。
以下3つの方法で指定可能。（他の方法もあるかもしれない。）
1. コントローラーで指定

def index
    @books = Book.page(params[:page]).per(10)#1ページ10個のコンテンツに指定
end

2. モデルで指定

 models/book.rb
class Book < ApplicationRecord
    paginates_per 10 #1ページ10個のコンテンツに指定
end

3. config/initializers/kaminari_config.rb内でデフォルト値を変更する。
このファイルはターミナルで`rails g kaminari:config`を実行すると生成される。

# frozen_string_literal: true

Kaminari.configure do |config|
   config.default_per_page = 10 #<=1ページ10個のコンテンツに指定
  # 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

ほか、デフォルト値は以下のようになっている。
以下の値に関しても config/initializers/kaminari_config.rb内で上書きすれば変更可能だ。


default_per_page      # 25 by default
max_per_page          # nil by default
max_pages             # nil by default
window                # 4 by default
outer_window          # 0 by default
left                  # 0 by default
right                 # 0 by default
page_method_name      # :page by default
param_name            # :page by default
params_on_first_page  # false by default

また、ファイルを変更してもブラウザで変化を確認できない場合は、
サーバーを再起動する。

rails s

4. paginateメソッド

ちなみに、
viewファイルに記載したこのコードは、paginateというヘルパーメソッド。

<%= paginate @books %>

paginateメソッドを使用して、このページネーションのデザインの変更も可能のようだ。詳細は割愛。以下、参照。

デフォルトのページネーション

参照
https://github.com/amatsuda/kaminari

最後に、kaminari gemの作成者さんへ。
初学者の私でも使いやすいです。作っていただきありがとうございます！