Rails4+kaminari+bootstrap3なページング

Railsにおけるページングライブラリといったらkaminariでいいですね。Rails4でも使えました。で、twitter-bootstrap3のページングUIと合わせて使えるのかやってみました。

kaminariの導入

Railsアプリこさえて、Gemfileに

  gem 'kaminari'

を追加して、

$ bundle

しますね。2013年11月28日現在では、kaminari (0.15.0) が入りました。ちなみに、Railsは4.0です。

bootstrap3の導入

同じく、Gemfileに

gem 'anjlab-bootstrap-rails',
:require => 'bootstrap-rails',
:github  => 'anjlab/bootstrap-rails'

を追加して、

$ bundle

します。

bootstrapのページング

bootstrapのページング(ページネーション)は、Components · Bootstrapに説明があります。kaminariのページングに、このUIを適用したい、っていうのがこの記事の根幹です。

rails generate kaminari:views bootstrap

kaminariにはthemeっていう概念があって、アプリにテーマを適用するには、

$ rails generate kaminari:views [theme]

を実行すると、[theme]が適用されたerbセットを作ってくれるんですね。で、[theme]に何指定したらいいの？ってことで、

$ rails g kaminari:views --help

をやったら、出てきました。

Usage:
  rails g kaminari:views THEME [options]

    Copies all paginator partial templates to your application.
    You can choose a template THEME by specifying one from the list below:

        - default
            The default one.
            This one is used internally while you don't override the partials.
        - bootstrap
            Pagination for Twitter Bootstrap 2.0.
            http://twitter.github.com/bootstrap/
        - github
            A very simple one with only "Older" and "Newer" links.
        - google
            A googlish one.
            Try with this option  :window => 10, :outer_window => -1

Options:
      [--skip-namespace]                   # Skip namespace (affects only isolated applications)
  -e, [--template-engine=TEMPLATE_ENGINE]  # Template engine for the views. Available options are "erb", "haml", and "slim".
                                           # Default: erb

Runtime options:
  -f, [--force]    # Overwrite files that already exist
  -p, [--pretend]  # Run but do not make any changes
  -q, [--quiet]    # Suppress status output
  -s, [--skip]     # Skip files that already exist

なんだ、bootstrapサポートされてるじゃない、ってことでTHEMEにbootstrapを指定して、

$ rails g kaminari:views bootstrap

を実行して、次のファイルたちを得たわけです。

• app/views/kaminari/_first_page.html.erb
• app/views/kaminari/_gape.html.erb
• app/views/kaminari/_last_page.html.erb
• app/views/kaminari/_next_page.html.erb
• app/views/kaminari/_page.html.erb
• app/views/kaminari/_paginator.html.erb
• app/views/kaminari/_prev_page.html.erb

_paginator.html.erbの修正

上のヘルプの内容を見ると、bootstrap2.0用のテーマなんですね。じゃあ、bootstrap3用にするには、どうするかってことなんですが、試したところ、_paginator.html.erbを、↓のように修正することで対応出来ました。

diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 03d508e..01e7195 100644
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -1,17 +1,19 @@
 <%= paginator.render do -%>
-  <div class="pagination">
-    <ul>
-      <%= first_page_tag unless current_page.first? %>
-      <%= prev_page_tag unless current_page.first? %>
-      <% each_page do |page| -%>
-        <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
-          <%= page_tag page %>
-        <% elsif !page.was_truncated? -%>
-          <%= gap_tag %>
+  <div class="row">
+    <div class="col-md-12 text-center">
+      <ul class="pagination">
+        <%= first_page_tag unless current_page.first? %>
+        <%= prev_page_tag unless current_page.first? %>
+        <% each_page do |page| -%>
+          <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
+            <%= page_tag page %>
+          <% elsif !page.was_truncated? -%>
+            <%= gap_tag %>
+          <% end -%>
         <% end -%>
-      <% end -%>
-      <%= next_page_tag unless current_page.last? %>
-      <%= last_page_tag unless current_page.last? %>
-    </ul>
+        <%= next_page_tag unless current_page.last? %>
+        <%= last_page_tag unless current_page.last? %>
+      </ul>
+    </div>
   </div>
 <% end -%>