kaminariを使ってpaginationを実装したら思ったより簡単だった

kaminariって？

amatsuda/kaminari https://github.com/amatsuda/kaminari

ページングの実装をやってくれるgemです。

例えばこんな感じのものです。

自前で作ったこともありますが、最後のページのとき表示を変えるとか、ページ数が多いときは省略表示にするとか、細かいロジックを入れだすとけっこうたいへんなので、今回はkaminariを使うことに。

使い方

サンプルにpersonテーブルを作ってやってみます。

1 . gemfileに追加

gem 'kaminari'

2 . bundle install

3 . scaffoldでテーブル作成

rails g scaffold person name:string

peopleテーブルのひな形ができます。

4 . migrateしてでもデータ入れる

rake db:migrate

データはrails sしてPerson.create(:name=>'hoge')で適当にデータを作成

5 . themeの変更 見た目をいくつかのthemeに変更したり、カスタマイズしたりもできるので、やってみました。 bootstrapにも対応しているようなので

rails g kaminari:views bootstrap

とやってみると

$rails g kaminari:views bootstrap
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_first_page.html.erb
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      create  app/views/kaminari/_gap.html.erb
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_last_page.html.erb
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_next_page.html.erb
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_page.html.erb
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      create  app/views/kaminari/_paginator.html.erb
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_prev_page.html.erb

てな感じでviewsを生成してくれます。

6 . controllerを編集 先ほどscaffoldでつくったpeopleテーブルの一覧で表示させてみます。

   def index
     @people = Person.all.page(params[:page]).per(3)
   end

とするとページングしたレコードをとてきてくれます。per=3であればlimit3で、pageが増えるごとにoffsetが増えたSQLが発行されます。

7 . viewsを編集

あとは表示したい部分で

<%= paginate @people %>

としてあげればOK.

のはずでしたが、どうもcssが効いてないものが表示されてしまったので、おかしいなと思って、app/views/kaminari/_paginator.html.erb を見てみると

<%= paginator.render do -%>                                                                                                                                                     
  2   <div class="pagination">
  3     <ul>
  4       <%= first_page_tag unless current_page.first? %>
  5       <%= prev_page_tag unless current_page.first? %>
  6       <% each_page do |page| -%>
  7         <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
  8           <%= page_tag page %>
  9         <% elsif !page.was_truncated? -%>
 10           <%= gap_tag %>
 11         <% end -%>
 12       <% end -%>
 13       <%= next_page_tag unless current_page.last? %>
 14       <%= last_page_tag unless current_page.last? %>
 15     </ul>
 16   </div>
 17 <% end -%>

となっており、ulにpaginationのクラスが書かれてないことが判明。。これは僕の使っているbootstrapが3.0だからなのかthemeが違うのか不明ですが、

<ul class='pagination'>

と書き換えて完了。

こんな感じになりました。