1
0

More than 3 years have passed since last update.

【Rails】 gem kaminari(初心者向け)

Last updated at Posted at 2021-02-11

はじめに

WEBサイトの下部の方には必ずと言ってもいいほど、ページを表す数字が並んでいるかと思います。
最近自身のポートフォリオの作成で使用したので、自身の備忘録として、またこれから実装する初心者の方の参考になればと思い投稿していきたいと思います。
※何らかの表示するビューが出来ている程で進めさせていただきます。

開発環境

ruby 2.6.3
Rails 5.2.4.4

見本はこのようなものです

今回私自身が作成したのは下のタイプのもので、bootstrapやcssなどを使用しカスタマイズしております。デフォルトは上のタイプのもので、数字と英語が組み合わさったものになります。
スクリーンショット 2021-02-12 1.06.27.png

スクリーンショット 2021-02-12 0.56.00.png

kaminariとページネーション

実装の前に少しだけ説明します。
kaminariとはgemの名称で、ページネーションとは大量の情報を指定した数ごとに分割をし、それぞれのページへ遷移しやすくするためのリンクのことです。
ページネーションがないと、一つの画面に大量の情報が全て掲載されることになり、それを毎回読み込むのは大変...見る方も大変です!
そんな問題を解決する便利なアイテムというわけです。
前置きが長くなりましたが、実装を進めていきたいと思います。

gemのkaminariをインストール

以下の通り、Gemfileへの記述を加え忘れずにbundle installしてください。

Gemfile.
gem 'kaminari'
terminal.
bundle install


コントローラの記述を変更する

Userモデルを例にして、一覧画面にユーザー情報が掲載されているとします。

users_controllers.rb
#元々の記述はこのような形だと思います。
def index
 @users = User.all
end

#最後のper()の部分が一画面に表示させる件数(今回は10件)
#デフォルトですと、id = 1から順番に取得されます。
def index
 @users = User.all.page(params[:page]).per(10)
end

# このように、orderの後に何で取得をするか条件を加えることも可能
# 下記の記述ですと、最新User10件を取得
def
 @users = User.all.page(params[:page]).per(10).order(created_at: "DESC")
end


ビューに記述を加える

画面に表示をさせるものの最後に、paginate @users (コントローラーで記述したインスタンス変数)を設定すれば完成です。
※ただし、指定した件数未満だとページネーションは表示されないので注意が必要です。

index.html.erb
<% @users.each do |user| %>
  <%= user.name %>
  <%= user.age %>
  <%= user.address %>
<% end %>
<%= paginate @users %>


日本語表記に変えたい場合

①以下の記述を加えます。
こちらは、次に出てくる日本語化をしてくれるja.ymlファイルを読み込むための記述です。

config/application.rb
config.i18n.default_locale = :ja

②config/locales/ja.yml
上記の階層に合わせて、ja.ymlファイルを作成します。
このja.ymlというのが、日本語化をしてくれるファイルになります。
最初、最後の部分を日本語でなく、記号やFont Awesomeの絵文字なんかに変えても対応可能です。

ja.yml
ja:
  views:
      pagination:
        first: '最初'
        last: '最後'
        previous: '前'
        next: '次'
        truncate: '...'

最後にサーバーを起動すれば、ビューにて確認ができるかと思います。

終わり

今回は以上になります。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0