読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

Railsでwill_paginateを使ってページネーションを実現する

Rails gem UI/UX

will_paginateとは

will_pagenateとは、ページネーションを作成するGemです。

f:id:nipe880324:20141108212535p:plain:w320

動作確認環境

  • Ruby 2.1.0
  • Rails 4.1
  • will_paginate 3.0.7

目次

  1. Railsプロジェクトの作成
  2. will_paginateのインストール
  3. will_paginateの設定
  4. will_paginateのi18n


1. Railsプロジェクトの作成

まずはRailsプロジェクトを作成します。

rails new will_paginate_test
cd will_paginate_test

次にwill_paginateによるページネーションの挙動を確認するために、ShopをScaffoldで作成します。

rails g scaffold Shop name zipcode address tel

データをseeds.rbに記載します。

# db/seeds.rb

1000.times do |i|
  Shop.create!(
    name:    "店名#{i}",
    zipcode: "111-#{sprintf("%04d", i)}",
    address: "住所#{i}",
    tel:     "00-1234-#{sprintf("%04d", i)}"
  )
end

マイグレーションを実行し、データを投入します。

rake db:migrate
rake db:seed


では、rails sでサーバーを起動してみましょう。
縦になが〜くデータが1000件表示されていると思います。
f:id:nipe880324:20141108210935p:plain:w320



2. will_paginateのインストール

まずは、Gemfileにkaminariを追加します

# Gemfile

gem 'will_paginate', '~> 3.0'

そしてBundlerを実行します。

bundle install


次に、一覧画面のテーブルの上側に現在いくつ表示しているかを表示します。
また、テーブルの一番下にページネーションのリンクを追加します。
will_paginateではヘルパーが用意されているので、それぞれ1行ずつ追加するだけなので簡単です。

# app/views/shops/index.html.erb
<h1>Listing shops</h1>

<!-- 追加箇所開始 -->
<%= page_entries_info @shops %>
<!-- 追加箇所終了 -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Zipcode</th>
      <th>Address</th>
      <th>Tel</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @shops.each do |shop| %>
      <tr>
        <td><%= shop.name %></td>
        <td><%= shop.zipcode %></td>
        <td><%= shop.address %></td>
        <td><%= shop.tel %></td>
        <td><%= link_to 'Show', shop %></td>
        <td><%= link_to 'Edit', edit_shop_path(shop) %></td>
        <td><%= link_to 'Destroy', shop, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Shop', new_shop_path %>


<!-- 追加箇所開始 -->
<%= will_paginate @shops %>
<!-- 追加箇所終了 -->

そして、コントローラーのindexアクションを次のように変えます。

# app/controllers/shops_controller.rb

  def index
    @shops = Shop.page(params[:page])
  end


では、サーバーを再起動して一覧画面を確認してみましょう。
画面下部にページのリンクが追加され、1ページあたり30件表示されています。
f:id:nipe880324:20141108212553p:plain:w320




3. will_paginateの設定

次のようにモデル単位とアプリケーション単位での1ページあたりの項目表示数を設定できます。

モデル単位で設定

class Shop
  self.per_page = 10
end

アプリケーション単位で設定

WillPaginate.per_page = 10


will_paginateのi18n

i18nでは、次の項目が設定可能です。

en:
  will_paginate:
    previous_label: "&#8592; Previous"
    next_label: "Next &#8594;"
    page_gap: "&hellip;"

    page_entries_info:
      single_page:
        zero:  "No %{model} found"
        one:   "Displaying 1 %{model}"
        other: "Displaying all %{count} %{model}"
      single_page_html:
        zero:  "No %{model} found"
        one:   "Displaying <b>1</b> %{model}"
        other: "Displaying <b>all&nbsp;%{count}</b> %{model}"

      multi_page: "Displaying %{model} %{from} - %{to} of %{count} in total"
      multi_page_html: "Displaying %{model} <b>%{from}&nbsp;-&nbsp;%{to}</b> of <b>%{count}</b> in total"


以上です。
もし、何か詰まったら、参考文献のページを確認してみてください。