takumiのエンジニア技術ブログ

takumiのエンジニア技術ブログ

未経験からエンジニアを目指しています!技術定着の為にこのブログにアウトプットしていきます!気軽にコメント等いただけるとありがたいです!

ペジネーション

f:id:golikyua:20190924212855j:plain


ペジネーションについて勉強したのでアウトプットします!


目標

「タスク一覧の表示数を制限して、複数のページに分割して表示する

やること

・kanimariのインストール
・ページ番号に対応した範囲の内容を表示する
・ビューにペジネーションのための情報を表示する


本題

・kaminariのインストール

Gemfileに「gem 'kaminari'」を記入して、「bundle」を実行。


・ページ番号に対応した範囲の内容を表示する。

ページ番号に対応するデータの範囲を検索の部分はkaminariが提供するpageというスコープを使うこと簡単にできる!

これを用いてindexアクションを編集

app/controller/tasks_controller.rb

def index
   @q = current_user.tasks.ransack(params[:q])
   @tasks = @q.result(distinct: true).page(params[:page])
...
end

ちなみにデフォルトで、1ページあたりに表示できる件数は25件になっている。



・ビューにペジネーションのための情報を表示する
ペジネーションを行う際に必要な情報は以下の3つ
1.現在どのページを表示しているかの情報
2.他のページに移動するためのリンク
3.全データ何件なのかという情報

kaminariはこれらを表示するためのヘルパーメソッドが用意されている
1.2の目的の為にpaginateと3の目的の為にpage_entries_info
app/views/tasks/index.html.slim

...

.mb-3
   = paginate @tasks
   = page_entries_info @tasks

...

これで、一覧ページが複数に分割されてが表示される!