開発中のサービス「いつもの更新、いつでも確認 | Moook」でページャーを実装する際に使用したgemkaminari
の使い方をメモφ(..)
使い方
gemのインストール
kaminari
を使うには、gemファイルに追加しbundle install
を実行します。
Gemfile
gem 'kaminari'
実装
ページャーを作るために必要な箇所はController
とView
のみです・ω・
処理の概要を説明すると下記のような感じです。
Source | 実装内容 |
---|---|
Controller | リクエストパラメーターから渡されたページ番号を使って、検索結果取得範囲を制御する。 |
View | ページャーを生成し、設置する |
具体的なプログラムも下記に記載しておきますφ(..)
Controller
def index @pages = Page.favorited_pages(current_user).page(params[:page]).per(9) end
取得結果に.page(params[:page])
及び.per(1ページ辺りの件数)
追記することで、ページ番号を指定した検索結果の制御が行えます。
検索結果の制御は、引数のページ番号とクエリメソッドのlimit
とoffset
を使って実現されていますφ(..)
※offset
とlimit
の詳細は、下記記事にまとめたので知りたい人がいれば見てみてください。
View
ページャーの設置を行う前に、ページャーのviewを生成します。
下記コマンドを実行すると、app/views/kaminari
配下にページャーのviewファイルが作成されます。
$ rails g kaminari:views default
その後、Controller
で取得したインスタンス変数をpagenate
に引数として渡してあげれば、ページャーが生成されます。
<%= paginate(@pages) %>
また、bootstrapをページャーに反映させるのも下記からファイルを取得してapp/views/kaminari
配下のファイルを差し替えてあげれば簡単に出来ます!
↓こんな感じ
ローカライズ
先程の画像では、ページャーの日本語化が行われていました。
これは、kaminari
のページャーの表示をconfig/locales/ja.yml
に追記することで設定できます。
これをやらないと翻訳を失敗した際に上手く表示されません・・・。
※私が導入した際もtruncate
が翻訳に失敗し、Truncate
と表示されてしまいました(´・ω・`)
ja.yml
views: pagination: first: "最初" last: "最後" previous: "前" next: "次" truncate: "..."
※applicaiton.rb
がconfig.i18n.default_locale=:ja
となっていることが前提です。
おわりに
kaminari
を使えば、簡単にページャーを設定することが出来ます!
ページャーを用いることで、取得レコード数が制限され表示のパフォーマンスも良くなると思いますので、皆さんも自分が作っているRailsアプリケーションに導入してみてはいかがでしょうか?ヽ(´エ`)ノ