インストールは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: "次ページ"
ページネーションの表示のカスタマイズは、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' %>
これでページネーションがgoogleと同じロゴになったと思います。
| Perl |
3
|
| Linux |
16
|
| Jenkins |
1
|
| CI |
1
|
| Bashシェル |
1
|
| シェルスクリプト |
1
|
| Munin |
7
|
| Ruby on Rails |
7
|
| plenv |
1
|
| sudo |
2
|
| Cobbler |
6
|
| ruby |
1
|
| rbenv |
1
|
| WeeChat |
1
|
| tmux |
2
|
| Webistrano |
1
|
| capistrano |
1
|
| puppet |
8
|
| growthforecast |
1
|
| Supervisor |
1
|
| perlbrew |
1
|
| git |
2
|
| Python |
1
|
| pip |
1
|
| PHP |
1
|
| Nginx |
1
|
| MySQL |
2
|
| LXC |
2
|
| RPM |
3
|
| ImageMagick |
1
|
| Subversion |
1
|
| qmail |
3
|
| yum |
1
|
| ucspi-tcp |
1
|
| daemontools |
1
|
| Puppet |
1
|
| IPVS |
1
|
| Kickstart |
1
|
| aaa |
0
|