1ページに表示できる投稿件数を制限する[kaminari]

はじめに

投稿一覧を作成している時投稿が何十件も増えたらスクロールが果てしなくなることに気がつきました。

そこでペーネーション機能を知り、実装ができたので忘れないために記事にしました。

よく見かけるこちらを実装していきます。

ペーネーション機能を使う理由

投稿一覧がトップページに表示されるサイトの場合、全ての投稿がトップページに表示されると読み込むまでに時間がかかりますし、かなり読みにくくなってしまいます。
また底が果てしなくなり、フッターまでたどり着くのに時間がかかります。

そんなときにページネーションの機能を実装しておけば表示される項目が一定数を越えると自動的に次のページへ内容を移行してくれるのでものすごい便利になります。

pikawaka引用

やること

• kaminari インストール

• コントローラーに定義

• ビューに表示できるように記述

これだけで使えるようになります。

あとはフレームワークなどで整えたり、日本語に直したりすることができます。

kaminariインストール

gemをインストールします。

Gemfileに下記を記述して下さい。

gem 'kaminari'

後はターミナルでbundle installします。

これでインストールは完璧です！

コントローラーに定義

reviews_controller.rb

class ReviewsController < ApplicationController
 def index
    @reviews = Review.page(params[:page]).per(5) # 5件溜まったら次のページへ
 end
end

ビューに表示できるように記述

index.html.erb

<%= paginate @reviews %>

一番下にこれを書くだけ。。。

これで一応使えるようになります。

ここからは見た目をカッコよくする方法です。

rails g kaminari:views default

app>viewsフォルダにkaminariが追加されます。
そのフォルダの中にページネーションの部分のhtmlが記述されているので、ここでで変更を行うことができます。

私の場合はフレームワークでbootstrapを使ったので以下のようにしました。

rails g kaminari:views bootstrap4

最後に日本語に変えることもできます。

config>locals>ja.ymlに以下を記述します。

ja.yml

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