なべしす

独立系SI企業から完全異業種のベンチャー企業に転職、社内のITインフラを整えるべく颯爽と登場した自称天才プログラマー俺のハートフルブログ

Rails kaminariを使用したページネーションにBootstrapデザインを適用させる

前提環境

  • RoRプロジェクト
  • プロジェクトにBootstrapの環境が整っている
  • プロジェクトにkaminariでページネーションが生成できる環境が整っている

kaminariを用いたページネーションのソースはとてもシンプル

<%= paginate @pagination %>

このどこにBootstrapを適用させる余地があるんだ…と頭を2秒ほど抱えた。

kaminariにBootstrapを適用させる

Bootstrap用のViewテンプレートをジェネレートする

rails g kaminari:views bootstrap3
Running via Spring preloader in process 68165
      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

テンプレートが作成される。

スクリーンショット 2017-07-12 16.16.47.png

これだけ

スクリーンショット 2017-07-12 16.18.24.png

一瞬で適用できた。

懸念点

逆にこのページだけBootstrapのデザイン使いたくないとなった時の対処方法が今の所わからない…

参考サイト

http://morizyun.github.io/blog/kaminari-gem-paginator-rails/