h3pei.tech
お仕事のご依頼
2012-09-30

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

Rails でのページネーションの導入に関して、とても丁寧に手順が書かれたサイト(現在はリンク切れ)があったので、それを見ながら実装するまで。

インストール

Kaminari という gem がページネーションの実装に利用できるよう。
Gemfile に「gem ‘kaminari’」と追加記述し、「bundle install」。

Model の設定

当該のモデルに、1ページあたりに出力するインスタンスの数を指定する。 とりあえず、Model ファイルの上部のほうに、

# 1ページに表示する件数の設定(Kaminari)
pagination_per 10

と記述。

Controller の設定

コントローラには、Model からページネーションを伴って出力したい情報の取得をして、変数に格納している箇所にメソッドを追加する

@entries = Entry.order('created_at DESC').page params[:page]

View の設定

<% @entries%>

のように出力していた箇所を

<% paginate @entries%>

にした。

これで一通りの設定は終わったはずなのでとりあえず、実行。その結果…

Routing Error
undefined method `paginates_per' for #<Class:#########>
Try running rake routes for more information on available routes.

Routing Error が起こりました!

多分、kaminari をインストールしてから再起動していないのが原因か?と思い、とりあえず Rails server を再起動。再び実行。その結果…

NoMethodError in
undefined method `current_page' for #<Enumerator:############>

NoMethodError が起こりました!

current_page メソッドが存在しない?よくわからない。Google 先生に色々と聞いた結果、ビューファイルでの書き方が間違っていたよう。

さっきまでは、

<% @entries.each do |entry| %>

となっている箇所を、

<% paginate @entries.each do |entry| %>

とやっていたが、これがそもそも間違っていた。

正しい(?)書き方は以下。

<div>
  <% @entries.each do |entry| %>
   …@entriesの出力操作
  <% end %>
</div>
<% paginate @entries %>

div じゃなくてもなんでもいいのだけれど、@entries オブジェクトを each で回し終わったあとに書くべきだったよう。

そうこうして、ページネーション自体の実装はできたのだけれど、デザインが明らかに崩れてしまっている。 2012-09-30-07-01.png

オプションをつけたりしてみたのだけれど、あんまり変わらない。再び Google 先生の元へ。

どうやら、twitter-bootstrap を利用しているために、デザインが崩れてしまっている用。詳細は以下の記事に書かれている。

これを解消するために、twitter-bootstrap-kaminari-views というライブラリを導入した。
github から clone して、views/以下の kaminari ディレクトリを、app/views/以下に置くだけ。

さらに、先ほど参考にさせていただいた2つのブログにも書かれているように config/locale/ja.yml ファイルを編集して出力文字を変更した。 結果は以下。 2012-09-30-07-02.png

良い感じになった!
ただ、ページネーションリストが左によってしまっているので、div で囲って text-align:center を付与。

<div style='text-align:center;'>
  <%= paginate @mails %>
</div>

こんなに簡単にページネーションが実装できるとは!!

h3pei's icon

h3pei

フリーランスのソフトウェアエンジニア。Ruby / Rails アプリケーションの開発が得意領域。設計・実装・運用まで含めてプロダクト開発が好きです。

Questalという目標達成コミュニティサービスを開発しました。仲間と一緒に目標達成に取り組みたい方はぜひご利用ください。

お仕事のご依頼
GitHubnoteX

関連記事