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

Rails Webook

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

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

kaminariとは

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

f:id:nipe880324:20141108204010p:plain:w320

サポートバージョン

  • Ruby 1.8.7, 1.9.2, 1.9.3, 2.0.0, 2.1.x
  • Rails 3.0, 3.1, 3.2, 4.0, 4.1
  • Haml 3+
  • Mongoid 2+
  • MongoMapper 0.9+
  • DataMapper 1.1.0+

動作確認環境

  • Ruby 2.1.0
  • Rails 4.1
  • kaminari 0.16.1

目次

  1. Railsプロジェクトの作成
  2. kaminariのインストール
  3. kaminariの設定
  4. kaminariのi18n
  5. Twitter Bootstrapを適用させる


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

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

rails new kaminari_test
cd kaminari_test

次にkaminariによるページネーションの挙動を確認するために、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:w380




2. kaminariのインストール

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

# Gemfile

gem 'kaminari'

そしてBundlerを実行します。

bundle install


次に、一覧画面のテーブルの上側に現在いくつ表示しているかを表示します。
また、テーブルの一番下にページネーションのリンクを追加します。
kaminariではヘルパーが用意されているので、それぞれ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 %>


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

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

# app/controllers/shops_controller.rb

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


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




3. kaminariの設定

次のコマンドでkaminariの設定ファイルを作成することができます。

rails g kaminari:config

1ページ辺りの表示数や、パラメーターの名前など次の項目を設定可能です。
コメントアウトされていますが、記載されている値はデフォルト値です。

Kaminari.configure do |config|
  # config.default_per_page = 25 # 1ページ辺りの項目数
  # config.max_per_page = nil    # 1ページ辺りの最大数
  # config.window = 4            # ex 値が2の場合 .. 2 3 (4) 5 6 ..
  # config.outer_window = 0      # ex 値が2の場合 .. (4) .. 99 100
  # config.left = 0              # ...になったときの左側の表示数
  # config.right = 0             # ...になったときの右側の表示数
  # config.page_method_name = :page # メソッド名
  # config.param_name = :page    # ページネーションのパラメーターの名前
end

また、上記は全体的な設定であり、次のように個別に設定することも可能です。

# app/models/shop.rb

class Shop < ActiveRecord::Base
  paginates_per 5  # 1ページあたり5項目表示
end
# app/views/shops/index.html.erb

...
<%= paginate @shops, outer_window: 4 %>

画面は次のようになります。
1ページに5項目しか表示されなくなります。
f:id:nipe880324:20141108204158p:plain:w380




4. kaminariのi18n

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

en:
  views:
    pagination:
      first:    "&laquo;"
      last:     "&raquo;"
      previous: "&lsaquo;"
      next:     "&rsaquo;"
      truncate: "&hellip;"
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: "No %{entry_name} found"
          one: "Displaying <b>1</b> %{entry_name}"
          other: "Displaying <b>all %{count}</b> %{entry_name}"
      more_pages:
        display_entries: "Displaying %{entry_name} <b>%{first}&nbsp;-&nbsp;%{last}</b> of <b>%{total}</b> in total"


Twitter Bootstrapを適用させる

次の記事の「インストール方法1」を見て、Twitter Bootstrapを導入します。

そして、次のコマンドでページネーションのアンカーのビューファイルをBootstrap3で作成します。

rails g kaminari:views bootstrap

画面を確認してみます。ページネーション部分だけBootstrap化されています。
app/views/kaminari/配下にページネーションのビューファイルが配置されたので、これを修正することでデザインを修正することが可能です。
f:id:nipe880324:20141108204246p:plain:w380


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