【Railsの便利gem】will_paginateでページネーションを実装する手順は?

スポンサーリンク

 

こんにちは、Railsエンジニアにょけん(@nyoken_box)です。

Railsのアプリケーションでなんかしらの一覧を表示したい場合、ページネーション(ページ送り機能)を用いると便利です。

下の画面の左上にあるようなやつですね。

1ページに数百件もの情報を載せるのは、見にくい上に読み込みが遅くなって不便です。

大量のデータを表示する際は、ぜひとも実装しましょう。

シンプルで使いやすいgem「will_paginate」を用いるのが、カンタンです。

 

スポンサーリンク

①「will_paginate」をgemファイルに記載

まずは、Gemfile「will_paginate」を追加しましょう。

gem 'will_paginate', '~> 3.1', '>= 3.1.6'

ピンク色の部分でバージョンを指定していますが、以下の環境ではこちらの指定をしないとうまく動きませんでした。

環境

  • Rubyバージョン=「2.4.1」
  • Railsバージョン=「5.2.1」

 

補足

will_paginate-bootstrap」というgemを用いて、Bootstrapでカッチョいい感じにページネーションを実装することもできます。

ただ、その場合はgemファイルがもう2つ必要ですのでご注意を。

gem 'bootstrap-sass'
gem 'will_paginate', '3.0.4'
gem 'will_paginate-bootstrap', '1.0.1'

 

gemファイルに記入を終えたら、「bundle install」を実行

$ bundle install

 

念のため、サーバーも再起動しましょう。

 

スポンサーリンク


②コントローラーのallメソッドをpagenateメソッドに変更

一覧で何かを表示する際は、基本的に「〇〇.all」というメソッドを用いていると思います。

例えば、Userモデルの一覧を出力する場合であれば・・・

class UsersController < ApplicationController

  def index
    @users = User.all
  end

こんな感じ。

will_paginate」を使用する場合、ここを変更する必要があります。

以下のようにしてください。

class UsersController < ApplicationController

  def index
    @users = User.paginate(page: params[:page])
  end

動作はややこしいので、読みたい方だけどうぞ。

ーーー読みたい人だけーーー

まず、User.paginateは、Userに関するデータをデータベースから30個ずつ取ってきて表示するという動作です。(30個という個数はデフォルトで決められています)

で、「どの30個を表示すればいいの?」という部分を決めているのが、(page: params[:page])なんですね。

ここで説明をわかりやすくするために、今データベース内に100個のUserデータがあると想定してください。

これを30個ずつ分けるので、ページ数は以下のようになります。

  • idが1〜30→1ページ目
  • idが31〜60→2ページ目
  • idが61〜90→3ページ目
  • idが91〜100→4ページ目

で、params[:page][:page]では、この「何ページ目か」という情報を渡しているんですよ。

params[1]であれば、idが1〜30番までのUserデータが取れるわけです。

で、これをさらに:pageというキーで設定して、paginateメソッドで表示しているんですね。

なんでわざわざ:pageに情報を格納しているかというと、paginateを使う際は、キーが:pageでその値として該当ページを示すハッシュを指定する必要があるため。

めんどくさい仕組みですね。

もっと超ざっくり説明すると、

上の画面で「2」ってとこを押すとparams[2]という情報が送られて、2ページ目に設定されている「id31〜60のUserデータ」を表示してくれるってことです。

 

③index.html.erbに「will_pagenate」を実装

最後に、viewファイルを変更しましょう。

ここは超カンタンです。

ページネーションを実装したいviewファイルに、以下ピンク色の箇所を記載するだけ。

ここでは、「index.html,erb」というファイルを例にとります。

app/views/users/index.html.erb
<%= will_paginate %>
<ul class="users">
  <% @users.each do |user| %>
    <li>
      <%= gravatar_for user, size: 52 %>
      <%= link_to user.name, user %>
    </li>
  <% end %>
</ul>

※<%= gravatar_for user, size: 52 %>ってとこは、アイコン画像を表示するための記述なので無視してください。

これで、以下のようにページネーションが実装できます。

 

ちなみに、Bootstrapを用いた場合は「<%= will_paginate %>」の部分を以下のように記述します。

<%= will_paginate renderer: BootstrapPagination::Rails %>

 

以下のような画面になります。

スポンサーリンク