もた日記

くだらないことを真面目にやる

トップ > Ruby on Rails > Railsメモ(9) : kaminariでページネーション機能を追加する

Railsメモ(9) : kaminariでページネーション機能を追加する

Ruby on Rails

2,500件分のデータを追加したのはよいが、アプリで表示してみると1ページに2,500件分全てが表示されてしまうのでページネーション機能を追加する。

f:id:wonder-wall:20150808191603p:plain

kaminari

有名なページネーション機能のgemはkaminariらしいので、Gemfileに下記行を追加してbundle installする。

gem 'kaminari'


次にapp/controllers/songs_controller.rbとapp/view/songs/index.html.erbをそれぞれ以下のように編集する。

class SongsController < ApplicationController
  def index
    @songs = Song.page(params[:page])
  end
end

<table class="table table-striped table-hover">
　…省略…
</table>
<%= paginate @songs %>

アプリで表示してみると、ページネーション機能は有効になっているがBootstrapのデザインが適用されていない。


f:id:wonder-wall:20150808200438p:plain

kaminari-bootstrap

Bootstrapのデザインを適用するにはkaminari-bootstrapを使うのが簡単なのでGemfileに追加してbundle installする。

gem 'kaminari-bootstrap', '~> 3.0.1'

gemを追加すれば他に何もしなくても下図のようにBootstrapのデザインが適用される。


f:id:wonder-wall:20150808200450p:plain




kaminariの設定

下記コマンドを実行すれば設定ファイルが作成されてデフォルトの値を変更できる。

$ ./bin/rails g kaminari:config
      create  config/initializers/kaminari_config.rb
$ cat config/initializers/kaminari_config.rb
Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
end

ただ、これだと全ての設定に関わるので各モデルやビューごとに設定したい場合は以下のようにする。

1ページあたりの表示数

1ページあたりの表示数を変更するにはモデルのファイルにpaginates_perを追加する。
デフォルトは25件ごとなので以下は100件に変更した例。

class Song < ActiveRecord::Base
  paginates_per 100
end

ページネーションの表示

ページネーションの表示を変更するにはビューのファイルでオプションを設定する。
例えば、現在表示しているページの前後何ページを表示するかを指定するwindowオプションを変更すると図のようになる。
この他にもouter_window、left、rightなどのオプションで表示を変更することができる。

<%= paginate @songs, :window => 2 %><

:window => 4（デフォルト）
f:id:wonder-wall:20150808205134p:plain
:window => 2
f:id:wonder-wall:20150808205145p:plain

i18n設定（日本語化）

表示を日本語化するために、まずconfig/application.rbのdefault_localeをjaに設定する。

config.i18n.default_locale = :ja

併せて、一般的な日本語表記のファイルをダウンロードしておく。

$ wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -O config/locales/ja.yml

kaminariの表記としては下記の項目が設定できるみたいだが、今回は使用するpaginationだけ設定する。
ちなみにpage_entries_infoは"何件中X〜Yまでを表示"みたいな情報を表示できる。

en:
  views:
    pagination:
      first: "&laquo; First"
      last: "Last &raquo;"
      previous: "&lsaquo; Prev"
      next: "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"

config/locales/kaminari_ja.ymlを作成して下記内容を記述する。

ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "&hellip;"

これで図のように表記が日本語になる。

f:id:wonder-wall:20150808211806p:plain