rails4 - kaminariとFoundation -

WEBアプリにkaminariとFoundationを導入したので、やり方と記録を記述します。

環境

• rails4.1.2
• Foundation5

kaminari導入

Gemfile

kaminariのgemを追加します

# paging
gem 'kaminari'

kaminari install

bundle install

Installing kaminari 0.16.3

kaminari Foundation install

ページングに利用するFoundation用のviewを作成します

bundle exec rails g kaminari:views foundation

      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

Controllerでkaminariを利用する

// before
@tests = Test.where(sub_id: params[:sub_id], deleted_at: nil)

↓

// after
@tests = Test.where(sub_id: params[:sub_id], deleted_at: nil).page(params[:page])

viewにページングのレイアウトを追加

<%= paginate @tests %>

下記のように表示されます

設定ファイルを作成

bundle exec rails g kaminari:config

create  config/initializers/kaminari_config.rb

デフォルト設定で利用する場合は作成する必要ありません。

find_by_sqlを使った場合のkaminari利用方法

@data = find_by_sql([sql, params[:sub_id])
@tests = Kaminari.paginate_array(@data).page(params[:page]).per(10)

上記のコードを見てもらえばわかると思いますが、paginate_arrayメソッドはArrayオブジェクトをpaginatable Arrayオブジェクトに変換するだけです。変換する理由は、便利なpage methodをviewで利用するためです。
なのでパフォーマンスには十分注意してください。(そもそもfind_by_sqlを使う実装やテーブル設計に問題がある可能性が高いです。リファクタリングをしましょう。)

以上

参考サイト

• Railsでkaminariを使ってページネーションを実現する
• How to use kaminari theme for zurb foundation

この記事がお役にたちましたらシェアをお願いします

Tweet