【Rails】ページネーションの実装

#ページネーションとは
一覧表示画面に表示するレコード件数が多くなると、目視での確認が困難になってしまいます。この問題を避けるための方法がページネーションです。
ページネーションとは、レコード件数が一定数を超えた場合に複数のページに分割して表示を行うことです。

##kaminariのインストール
Railsでページネーションを実現するgemとして、kaminariがあります。今回はこれを用いてページネーションを進めていきます。
まずは、gemファイルに以下を追加。

Gemfile

gem 'kaminari'

bundleコマンドでkaminari gemをインストールします。

$ bundle

##ページ番号に対応する範囲のデータを検索するようにする
PostsControllerのindexアクションを変更します。
このアクションでは、ページ番号がparams[:page]として渡されることを前提とします。ページ番号を用いて、データ範囲を検索する機能は、kaminariのpageスコープで簡単に行えます。
indexアクションを以下のように変更します。

app/controllers/posts_controller.rb

  def index
    @posts =Post.page(params[:page])
  end

##ビューにページネーションのための情報を表示する
ビューには、ページネーションための以下の情報を表示するようにします。

1. 現在どのページを表示しているかの情報
2. 他のページに移動するためのリンク
3. 全データが何件なのかという情報

1と2のためにはpaginate、3のためにはpage_entries_infoというkaminariヘルパーメソッドが利用できます。

それでは、ビューを以下のように変更します。

…
= link_to '新規投稿', new_post_path, class: 'btn btn-primary'

.mb-3
  =paginate @posts
  =page_entries_info @posts

table.table.table-hover
…

ページネーションの情報を表示する枠として、mb-3というCSSクラスのついたdiv要素を用意し、paginateヘルパー、page_entries_infoヘルパーを呼び出しています。

##翻訳ファイルの追加
kaminariが用意している翻訳ファイルはen(英語)のみなので、以下の内容でjaの翻訳ファイルを用意します。

config/kaminari.ja.yml

ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "…"
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: "%{entry_name}がありません"
          one: "1件の%{entry_name}が表示されています"
          other: "&{count}件の%{entry_name}が表示されています"
      more_pages:
        display_entries: "全%{total}件中 %{first} - %{last}件の%{entry_name}が表示されています"

##デザインの調整
機能は実装できましたが、見た目がいまいちなので修正します。paginateヘルパーが表示に使用するパーシャルテンプレートをアプリ内に用意し、それを自由にカスタマイズすることができます。パーシャルテンプレートはkaminariの提供するジェネレータで生成しますが、その際にテーマ(Thema)と呼ばれるデザインの種類を指定して、好みのパーシャルテンプレートを生成できます(https://github.com/amatsuda/kaminari_themes)。

今回はbootstrap4というテーマのパーシャルテンプレートを生成します。

$ bin/rails g kaminari:views bootstrap4

app/views/kaminari配下にいくつかビューテンプレートが追加されます。

そして、localhost:3000にアクセスすると…

無事に格好良くなっています!

#参考
現場で使える Ruby on Rails 5速習実践ガイド