【Ruby on Rails】kaminariとbootstrap4で日本語に対応したページネーションを実装する。

4104 ワード
where 日本語 RubyOnRais5 bootstrap4 ページネーション 日本語 テキストリンク

はじめに

kaminariとbootstrap4でお洒落なページネーションを簡単に実装する方法をまとめました。

[前提]

bootstrap4がインストールされている

使い方

準備（インストール）

#Gemfile
gem 'kaminari'
gem 'bootstrap4-kaminari-views'

bundle install
#「bundle」だけでもOK

設定

日本語の設定（任意）

kaminariの日本語設定用ファイルを作成

config/locales/kaminari_ja.yml
ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "..."

実装

Controller

Controllerでページパラメータ（ page(params[:page]) ）を取得

@movies = Movie.where(status: "公開中").page(params[:page]).per(10)
#Movie.where(status: "公開中") ← Movieモデルからstatusが"公開中"のレコードを抽出
#page(params[:page]).per(10) ← ページパラメータを取得(10件毎)

※全件取得する場合は モデル名.all で指定

@movies = Movie.all.page(params[:page]).per(10)

View

Controllerで指定した変数を指定

#paginate @movies ← 変数 movies の中身を１０件毎に表示
#theme: 'twitter-bootstrap-4 ← 使用したいテーマを指定
<%= paginate @movies, theme: 'twitter-bootstrap-4'%>

表示

※上手く表示されない方は

  • サーバーの再起動
  • 設定ファイルの確認
  • perの設定（データ数以上のper値を設定するとページネーションが表示されません）

を確認してみてください！

参考
https://github.com/KamilDzierbicki/bootstrap4-kaminari-views