maehachi08 Anything Blog

2012年07月09日
kaminariでページネーションを実装

インストール

インストールはGemfileに1行追加して、bundleコマンド実行するだけです。

# vim Gemfile
gem 'kaminari'

# budle

モデル設定

ページネートで表示させる対象のモデルファイルにスコープと1ページで表示させたい件数を定義します。
今回は降順で1ページに5件ずつ表示する設定にします。

# cat app/models/blog.rb
class Blog < ActiveRecord::Base
  #kaminari Plugin Use Define
  default_scope :order => 'created_at DESC'
  paginates_per 5
end

コントローラ設定

モデルクラスを通してテーブルのデータを取得するメソッドをコントローラに記述します。

# vi app/controllers/blog_controller.rb
  def index
    @blogs = Blog.order('created_at DESC').page params[:page]
  end

ビュー設定

ビューファイルでページネーションを表示するpaginateヘルパーメソッドを記述します。

<%= paginate @blogs %>

表示のカスタマイズ

ページネーションの表示を日本語に対応させます。

# vim config/locales/en.yml
# Sample localization file for English. Add more files in this directory for other locales
.
# See http://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting point
s.

en:
  hello: "Hello world"
  views:
    pagination:
      first: "最初のページ"
      last: "最後のページ"
      previous: "前ページ"
      next: "次ページ"

テーマの適用(googleテーマ)

ページネーションの表示のカスタマイズは、CSSを適用する方法のほかにもテーマを適用する方法もあります。
今回はテーマの適用でgoogleのページネーションテーマを利用します。
Githubに【kaminari_themes】というテーマが公開されていますので、git cloneでローカルサーバに持ってきます。

# mkdir /root/git

# cd /root/git

# git clone https://github.com/amatsuda/kaminari_themes.git
Cloning into 'kaminari_themes'...
remote: Counting objects: 110, done.
remote: Compressing objects: 100% (95/95), done.
remote: Total 110 (delta 28), reused 4 (delta 0)
Receiving objects: 100% (110/110), 12.80 KiB, done.
Resolving deltas: 100% (28/28), done.

# cd /usr/local/apache2/htdocs/maepachi.com

# mkdir app/views/kaminari/my_custom_theme

# cp -p /root/git/kaminari_themes/google/app/views/kaminari/* app/views/kaminari/my_custom_theme/

表示のカスタマイズ

ページネーションの表示を日本語に対応させます。修正したのは"Next"を"次へ"、"Previous"を"前へ"の2箇所です。

⇒ googleテーマのファイルはこんだけある。
# ls -l /root/git/kaminari_themes/google/app/views/kaminari/
合計 32
-rw-r--r-- 1 root root 419  7月  8 22:23 _next_page.html.erb
-rw-r--r-- 1 root root 385  7月  8 22:23 _next_page.html.haml
-rw-r--r-- 1 root root 305  7月  8 22:23 _page.html.erb
-rw-r--r-- 1 root root 267  7月  8 22:23 _page.html.haml
-rw-r--r-- 1 root root 826  7月  8 22:23 _paginator.html.erb
-rw-r--r-- 1 root root 793  7月  8 22:23 _paginator.html.haml
-rw-r--r-- 1 root root 429  7月  8 22:23 _prev_page.html.erb
-rw-r--r-- 1 root root 395  7月  8 22:23 _prev_page.html.haml

⇒ 修正前と修正後のファイルでのdiff結果
# echo "$(ls /root/git/kaminari_themes/google/app/views/kaminar
i/)" | while read FILE ; do echo "============= ${FILE}の差分情報 =============" ; diff /r
oot/git/kaminari_themes/google/app/views/kaminari/${FILE} /usr/local/apache2/htdocs/maepac
hi.com/app/views/kaminari/my_custom_theme/${FILE} ; echo "" ; done
============= _next_page.html.erbの差分情報 =============
4c4
<   <%= link_to raw('<span class="csb ch" style="background-position:-96px 0;width:71px"></span><span style="display:block;margin-left:53px;text-decoration:underline">Next</span>'), url, :class => 'pn knavi', :id => 'pnnext', :style => 'text-align:left;text-decoration:none', :remote => remote %>
---
>   <%= link_to raw('<span class="csb ch" style="background-position:-96px 0;width:71px"></span><span style="display:block;margin-left:53px;text-decoration:underline">次へ</span>'), url, :class => 'pn knavi', :id => 'pnnext', :style => 'text-align:left;text-decoration:none', :rel => 'next', :remote => remote %>
5a6
>

============= _next_page.html.hamlの差分情報 =============
4c4
<   = link_to raw('<span class="csb ch" style="background-position:-96px 0;width:71px"></span><span style="display:block;margin-left:53px;text-decoration:underline">Next</span>'), url, :class => 'pn knavi', :id => 'pnnext', :style => 'text-align:left;text-decoration:none', :remote => remote
---
>   = link_to raw('<span class="csb ch" style="background-position:-96px 0;width:71px"></span><span style="display:block;margin-left:53px;text-decoration:underline">次へ</span>'), url, :class => 'pn knavi', :id => 'pnnext', :style => 'text-align:left;text-decoration:none', :remote => remote

============= _page.html.erbの差分情報 =============

============= _page.html.hamlの差分情報 =============

============= _paginator.html.erbの差分情報 =============

============= _paginator.html.hamlの差分情報 =============

============= _prev_page.html.erbの差分情報 =============
4c4
<   <%= link_to raw('<span class="csb ch" style="background-position:0 0;float:right;width:53px"></span><span style="display:block;margin-right:35px;clear:right;text-decoration:underline">Previous</span>'), url, :class => 'pn knavi', :id => 'pnprev', :style => 'text-decoration:none', :remote => remote %>
---
>   <%= link_to raw('<span class="csb ch" style="background-position:0 0;float:right;width:53px"></span><span style="display:block;margin-right:35px;clear:right;text-decoration:underline">前へ</span>'), url, :class => 'pn knavi', :id => 'pnprev', :style => 'text-decoration:none', :remote => remote %>

============= _prev_page.html.hamlの差分情報 =============
4c4
<   = link_to raw('<span class="csb ch" style="background-position:0 0;float:right;width:53px"></span><span style="display:block;margin-right:35px;clear:right;text-decoration:underline">Previous</span>'), url, :class => 'pn knavi', :id => 'pnprev', :style => 'text-decoration:none', :remote => remote
---
>   = link_to raw('<span class="csb ch" style="background-position:0 0;float:right;width:53px"></span><span style="display:block;margin-right:35px;clear:right;text-decoration:underline">前へ</span>'), url, :class => 'pn knavi', :id => 'pnprev', :style => 'text-decoration:none', :remote => remote

ビューファイルの修正

ビューファイルで記述したpaginateヘルパーメソッドに修正を加えます。

<%= paginate @blogs , :theme => 'my_custom_theme' %>

Apacheの再起動

service apache restart


これでページネーションがgoogleと同じロゴになったと思います。