bootstrapでKaminariを使ってpaginateする

paginate（データベースのデータがページに収まりきらない時に、それを分割して、複数ページにする）するのに、Kaminariを用いて実現しようとした場合、bootstrapで定義されているpaginateのスタイリングとkaminariのスタイリングがうまく噛み合わず、表示がくずれる。それをどうやって修正するのかメモをしておく。

２０１３年３月１８日追記
どうやら公式のTHEMEにbootstrap向けのtemplateがあった模様
手動でやる方法の後に追記

themes

The generator has the ability to fetch several sample template themes from the external repository (github.com/amatsuda/kaminari_themes) in addition to the bundled “default” one, which will help you creating a nice looking paginator.

##railsにKaminariを導入する
gemの導入
Gemfileにkaminariをついかする

Gemfile

gem 'kaminari'

そしていつもどおりbundleしてgemをインストールする。

controller
そして、コントローラでデータベースからデータフェッチしてくる時に、リレーションに.pageと.perメソッドを追加してやる。
この時、.pageは表示したいページ番号を引数で渡してやる。ここの例ではkaminariではparams[:page]にページ番号を自動的にわたしてくれるのでそれを利用して、kaminariが生成してくれるリンクから行きたいページを取得して表示出来るようにしてる。また、.perメソッドはページあたりのレコード数を指定する。デフォルトでは25件となっている。

また、この時にリレーションを作成時にorder句でスコープをしてやることがお行儀がいいようである。kaminariは内部的にlimitとoffsetを利用してるので、orderを追加してやることで予測できない順番でレコードを取得するのを回避するようである。

someController.rb

@user_statuses = UserStatus.order('ex_point DESC').limit(20).includes("last_treasure").page(params[:page]).per(10)

view
ページのリンクを表示したいところに

someView.html.haml

= paginate @user_statuses, :window => 2

paginateヘルパーに先程のcontrollerで用意したページングしたいインスタンス変数を渡してやればいい。オプションで:windowハッシュで前後のページへのリンク数を指定することもできる。

また、毎回オプションを指定するのが面倒となる場合は、cofigureファイルを用意してやることで手間を軽減できる。

% rails g kaminari:config

作成されるconfig/initializers/kaminari_config.rbを編集してやればデフォルト値をいじることができる。

これで、とりあえずの導入は完了する。
しかし、これでレンダリングしてやるとbootstrapが用意してるpagination用のスタイルが適応され、表示崩れる。

##KaminariをBootstrapに合った形に変更する
###手動でbootstarpに合う形にする。
以下に紹介するやり方は、実は回りくどかったみたいです。templateにboostrapのものが用意されているのを見落としていたので手動でやった時のメモです。他のフレームワークを使った時に手動でやらねばならないことがあると思うのでその時の参考になると思うのでその方法を残しておきます。bootstrapを使われてる方は読み飛ばしてください。

kaminariではspanをつかってページリンクリストを実現しているが、bootstrapではulをつかって実現している。この不整合と、bootstrapで定義されてるクラスを追加していく。

まず、テンプレートを作成する。

% rails g kaminari:views default

するとviews/kaminari以下にファイルが作られる。
基本的には、各ファイルのspanになっている箇所をliに変える。
以下に変更がほかにも及ぶファイルの一覧を示す。

_paginator.html.haml

= paginator.render do
  %div.pagination.pagination-centered
    %ul
	#以下標準状態

_page.html.haml

%li{:class => "page_num #{'active' if page.current?}"}
  = link_to page, url, {:remote => remote, :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil}

_gap.html.haml

%li.page.gap.disabled
  %a= raw(t 'views.pagination.truncate')

これでbootstrapのpaginationのスタイルを利用できるようになる。

###もっとシンプルに
用意されているtemplateを利用してやるにはテンプレートを作成時にdefaultではなくbootstrapを指定してやれば一発で作成される。

%rails g kaminari:views bootstrap

##他のテンプレート
他に用意されてるものはbootstrapを含め３つのようです。

avaliable themes: bootstrap, github, google

##参考リンク
bootstrap
本家のレシピ
本家Readme