Home » bootstrap » kaminari でページを分割してスマートにする ruby on rails

kaminari でページを分割してスマートにする ruby on rails

環境

ruby 2.4.1
ruby on rails 5.1.4
OS CentOS

kaminariとは

kaminariとは一言でいえばページネーションです。
kaminariを設定なしで使うこともできますが、
カスタマイズすることもできます。
レコードの表示数の調整や
デフォルトでは25レコードでページネーションされます。
これを設定で10や100レコードでページネーションされるような設定もできます。

インストール方法

kaminariGemfileに記述します。

gem 'kaminari'

インストールします。

bundle install

kaminariの実装

まずデフォルト設定での実装をしていきます。
ページネーションをするためのcontrollerの設定をします

  def index
    # @posts = Post.all この部分を変更する
    @posts = Post.page(params[:page])
  end

ビューでの設定をしてページネーションを展開します。

<h1>Posts</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Text</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td><%= post.text %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>
<%= paginate @posts %># <%= paginate 標識 %> でページネーションが展開されます。

実際にindexのページでどう表示されているかを確認します。

このようにページが分割されているのがわかります。

デフォルトの場合、25レコード毎ページが分けられます。

デフォルトの設定を変える

デフォルトの設定で25レコードで分割されるところを、
10レコードで分割されるよう設定することもできます。
その他にもページネーションの細かい設定もすることもできます

では、設定ファイルを作成していきます

$ rails g kaminari:config
Running via Spring preloader in process 21199
      create  config/initializers/kaminari_config.rb

デフォルトで使用することもできますが、
設定することにより自分の意図するページネーションを展開することができます。
下記のような設定をすることができます。

Kaminari.configure do |config|
  # config.default_per_page = 25 # 1ページ辺りの項目数
  # config.max_per_page = nil    # 1ページ辺りの最大数
  # config.window = 4            # ex 値が2の場合 .. 2 3 (4) 5 6 ..
  # config.outer_window = 0      # ex 値が2の場合 .. (4) .. 99 100
  # config.left = 0              # ...になったときの左側の表示数
  # config.right = 0             # ...になったときの右側の表示数
  # config.page_method_name = :page # メソッド名
  # config.param_name = :page    # ページネーションのパラメーターの名前
end

railsWebook より http://ruby-rails.hatenadiary.com/entry/20141113/1415874683

モデル毎に設定することもできます。

実際にモデルの設定で1ページ10レコード表示の設定をしてみます。


class Post < ApplicationRecord
    # paginates_per 10 #1ページ10レコードを表示
end
適用されているか確認します。
1ページ10レコードが表示されているのが確認できます。
デフォルトの設定もできますが、
個々で設定もすることもできます。

perメソッドでcontroller内で設定

perメソッドはcontroller内で1ページのレコード表示数の
設定をする時に役立つメソッドです。
モデルでの設定をしないでcontroller内で設定できます。

def index
  @posts = Post.page(params[:page]).per(20) # 1ページ20レコードに設定
end

このようににコントローラーで設定することもできます。

kaminari-bootstrapでbootstrapのデザインを設定

bootstrap導入

bootstrap-sassをインストールする

em 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'
bundle install

次にjsファイルとcssファイルにboostrapを適用するための設定をします

//= require jquery
//= require bootstrap-sprockets

ファイルの名前をcssからscssに変えて設定します。

 @import "bootstrap-sprockets";
 @import "bootstrap";

これでbootstrapの設定は完了です。

kaminari-bootstrap

kaminari-boostrapはページネーションをデザインしてくれるgemです。
インストールするだけで適用されます。設定いらずです。
インストールしていきます。

gem 'kaminari-bootstrap', '~> 3.0', '>= 3.0.1'

適用されているか確認します。

bootstrap風のデザインがされているのがわかります。
gemを入れるだけでkaminariがデザインが変わるのでおすすめです。

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。