kaminariを用いたページネーション機能の実装について

こんにちは、くになかです。

学習したことの備忘録を書いて行きたいと思います。

はじめに

投稿一覧ページにページネーションの機能を追加した際の備忘録を書いていきます。

gemのkaminariを使って実装しました。

ページネーションとは

多くなってしまった投稿などを複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。

kaminariとは

Railsアプリケーションにページネーションを導入するためのgemです。

下記のように実行するとインストールできます。

gemfile

gem ‘kaminari'

terminal

$ bundle

kaminariの設定ファイルを作成・変更

下記のように実行してkaminari_config.rbを作成します。

terminal

$ rails g kaminari:config

作成したkaminari_config.rbを変更します。

config/initializers/kaminari_config.rb

Kaminari.configure do |config|
# frozen_string_literal: true
config.default_per_page = 20
# 今回は掲示板の表示数を20個にしたいので、config.default_per_pageを20にします。
# 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ファイル配下にあるファイルを変更したらサーバーの再読み込みが必要なので、terminalでrails sを実行します。

terminal

$ rails s

ページネーションのデザインを変更

事前にテンプレートが用意されているので、をダウンロードすることで好きな見た目に変えることが出来ます。

今回はbootstrap4をダウンロードします。

terminal

$ rails g kaminari:veiws bootstrap4

controllerを編集

掲示板一覧のアクションにpage(params[:page])を追加します。

app/controllers/boards_controller.rb

def index
@boards = Board.all.page(params[:page]).includes(%i[user bookmarks]).sorted
end

viewを編集

view側に下記コードを入力することで、ページネーションを表示できます。

paginateメソッドでページネーションのテンプレートをrenderします。

app/views/boards/index.html.erb

<%= paginate @boards %>

まとめ

ページネーションはkaminariを使うことで簡単に実装できました。

initializersファイル配下にある設定ファイルを変更した時に、サーバーの再読み込みを忘れがちなので気をつけたいと思いました。

参考文献

https://github.com/kaminari/kaminari#configuring-kaminari%EF%BC%89

以上です。最後まで読んでいただきありがとうございます。