1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ページネーション

Posted at

##ページネーション
長い文章を複数のページに分割して、各ページへのリンクを並べアクセスすることです。
まずはkaminariというGemをインストールします。
追記する場所は、Gemfileの最後の行です。

gem 'kaminari'
$ bundle install

##pageメソッド
kaminariを導入すると、モデルクラスにpageメソッドが定義されます。このメソッドは、ページ数を指定します。
kaminariによってリクエストの際paramsの中にpageというキーが追加されています。その値がビューで指定したページ番号となるため、pageの引数はparams[:page]となります。
##perメソッド
kaminariを導入すると、モデルクラスにperメソッドが定義されます。このメソッドは、1ページあたりに表示する件数を指定します。perメソッドに引数として渡した数字が、ページネーションが実装されたビューで1ページあたりに表示するレコードの件数になります。
【例】

変数名 = クラスを利用して取得したレコードのインスタンス.page(params[:page]).per(1ページで表示したい件数)

今回はモデル名Tweetでindexアクションに定義していきたいと思います。

〜省略〜
def index
    @tweets = Tweet.includes(:user).order("created_at DESC").page(params[:page]).per(10)
  end
〜省略〜

上記の記述で投稿が10つ以上だったら次のページにいけるようにしました。
だがこれだけではまだエラーがでてしまいます。
##paginateメソッド
kaminariを導入すると、paginateというヘルパーメソッドが使用できます。このメソッドは、ページネーションのリンクを表示したいときに使用します。
paginateメソッドの引数は、コントローラーで定義したレコード情報を持つインスタンス変数を指定します。
投稿を全て表示した後に、ページネーションのリンクを表示したいので最後の行に記述していきます。
【例】

app/views/tweets/index.html.erb
〜省略〜
<%= simple_format(tweet.text) %>
      <span class="XXXX">
        <a href="/users/<%= tweet.user.id %>">
          <span>投稿者</span><%= tweet.user.nickname %>
        </a>
      </span>
    </div>
  <% end %>
  <%= paginate(@tweets) %>
</div>

上記の<%= paginate(@tweets) %>これで、ページネーションを実装することができました。
##マイページ表示にもページネーション
これもさっきのと同じで

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    user = User.find(params[:id])
    @nickname = user.nickname
    @tweets = user.tweets.page(params[:page]).per(5).order("created_at DESC")
  end
end

上記のように記述し

app/views/users/show.html.erb
<div class="XXXX">
  <p><%= @nickname %>さんの投稿一覧</p>

  <% @tweets.each do |tweet| %>
    <div class="YYYY" style="background-image: url(<%= tweet.image %>);">
      <%= simple_format(tweet.text) %>
    </div>
  <% end %>
  <%= paginate(@tweets) %>
</div>

上記の<%= paginate(@tweets) %>を記述すればtweetのindexアクションとuserのshowアクションにページネーションの実装ができました。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?