Help us understand the problem. What is going on with this article?

【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.all.order(created_at: :desc)
    @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メソッドをつける。

you8
普段はSNSのプロダクトマネージャーをしています。広告とかチーム運営とかについてはここ( http://you88.space/ )。日曜大工的に個人開発しています。( https://twitter.com/you8802 )作ったランチ募集サービス https://www.tea-pot.net/
https://you88.space/
nana-music
音楽SNSサービス「nana」の開発・運営を行っているスタートアップ
https://nana-music.co.jp
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした