Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
120
Help us understand the problem. What are the problem?
@you8

【rails】kaminariを使ってページネーションを作る

kaminariのインストール

gem 'kaminari'

kaminariをまずはインストール

$ bundle install

bundle installでインストールを実行

kaminariの仕様

基本的な設定

ページネーションしたい部品をpage(params[:page]).per(20)でpageあたりいくつ表示させるか設定する。

home_controller.rb
class HomeController < ApplicationController
  def top
    @posts = Post.page(params[:page]).per(20)
  end
end
_postindex.html.erb
<% @posts.each do |post| %>
 <div class="panel panel-success">
   <div class="panel-body">
    <%= link_to(post.content,"/posts/#{post.id}") %>
   </div>
   <div class="panel-footer">content_description</div>
 </div>
<% end %>
<%= paginate @posts %>

paginateと繰り返す変数は同じものを設定する。@postsをcontrollerの設定で繰り返し、その設定でpaginateも設定する。

pageメソッド

kaminariを導入すると、モデルクラスにpageメソッドが定義される。このメソッドは、ページネーションにおけるページ数を指定。ビューのリクエストの際paramsの中にpageというキーが追加されて、その値がビューで指定したページ番号となる。よって、pageの引数はparams[:page]となる。

perメソッド

perメソッドもpageメソッドと同様、kaminariというgemをインストールすることで利用できるメソッド。1ページあたりに表示する件数を指定。perメソッドに引数として渡した数字が、ページネーションが実装されたビューで1ページあたりに表示する件数になる。

変数名 = クラスを利用して取得したレコードのインスタンス.page(params[:page]).per(ここに1ページで表示したい件数を入力)※ページネーションを実装したいcontroller#actionに追加

見た目を変える

$ rails g kaminari:views default

これでviews/kaminari以下にファイルができる。ここでデザインの修正ができる。

設定を変える

$ rails g kaminari:config

config
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

kaminariで並び順を変える

application.controller.erb
class HomeController < ApplicationController
  def top
    @posts = Post.page(params[:page]).per(6).order('updated_at DESC')
  end
end

上記のようにpageメソッドを指定しているオブジェクトにorderメソッドをつける。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
120
Help us understand the problem. What are the problem?