🕌
Rails｜kaminariの導入方法〜Bootstrapの適用
はじめに
Railsアプリケーションで簡単にページネーションを作成できる kaminari という Gemの導入方法から、Bootstrapの適用方法まで解説します。
開発環境
ruby 3.1.2p20
Rails 6.1.7.4
Cloud9
kaminari (1.2.1)
bootstrap5
Bootstrapは導入済み
ビューやコントローラは作成済み
kaminari のインストール
Gemfileに 以下を追記する。
gem 'kaminari', '~> 1.2', '>= 1.2.1'
gem 'bootstrap5-kaminari-views', '~> 0.0.1'
以下のコマンドを実行する
$ bundle install
$ rails g kaminari:config
$ rails g kaminari:views bootstrap3
rails g kaminari:config
kaminariの設定ファイルを作成する。
rails g kaminari:views bootstrap3
bootstrapを適用した kaminariのviewを作成する。
これで kaminariを利用する準備が整いました！
コントローラ ＆ ビューの編集
example_controllers.rb
def index
@items = Item.all.page(params[:page]).per(9)
end
kaminariを導入したことで .pageが使用できるようになりました。
.per(9)はオプションで、1ページ内に表示させたい itemの数を指定しています。
※1ページ内に表示させたい個数のデフォルトは config/initializers/kaminari_config.rbで設定できます。
example.html.erb
<%= paginate @items, theme: 'bootstrap-5' %>
ページネーションを表示させたい部分に、上記のようなコードを記述します。theme: 'bootstrap-5'を記述しないと、デフォルトのデザインになってしまうので、要注意です。
↓こちらがデフォルトのデザイン
↓こちらが Bootstrap適用後のデザイン
ページネーションをさらにカスタマイズ
これでページネーションはそこそこいい感じです。
しかし今回はもっとシンプルにしたいので、config/locals/ja.ymlを編集します。※当該ファイルがない場合は作成します。
ja.yml
ja:
views:
pagination:
first: <i class="fas fa-angle-double-left"></i>
last: <i class="fas fa-angle-double-right"></i>
previous: <i class="fas fa-angle-left"></i>
next: <i class="fas fa-angle-right"></i>
truncate: "..."
これでサーバーを再起動すると、最終形になりました！
参考にさせていただいた記事
Discussion