ページネーション機能を実装しよう
前章に引き続き、movieプロジェクトに新しい機能を追加しながら、代表的なgemの使い方を学びましょう。今回は「ページネーション(ページ送り、ページ割り)」です。
現在、worksのindexページには登録されている複数の映画作品が並んでいますが、その登録が100、200と増えていった時、全てを一つのページで表示させるととても縦に長いページになり、閲覧しにくくなことが想定されます。ページネーションはそれらを複数のページに分割して表示させる機能で、データの一覧を表示させるindexページなどでよく利用されます。
今回はworksのindexページにページネーションを実装しましょう。indexページを最初に開いた時に表示される作品は「9作品」とし、下部に設置したページのリンクをめくるごとに、次の9作品が閲覧できるようにします。
ページネーションの実装には、gem「kaminari」を利用します。
bootstrapとの相性もよく、シンプルなコードで実装できるため、広く利用されているgemです。
早速Gemfileに以下を追記し、bundle install
を実行しましょう。
gem 'kaminari'
controllerを編集
次に、works_controllerを編集します。indexアクションを定義している部分を以下のように書き換えます。
@works = Work.all.page(params[:page]).per(9)
公式ドキュメントによると、pageは「何ページ目を表示させるか」を指示する部分です。特定のページ数ではなくユーザーが指定したページを表示させるためには、後ほど設置するページリンクから与えられるparamsを使って、ユーザーが指定するページ数のデータを受け取る必要がありそうです。ユーザーが指定するページ数を表示させるには、.page(params[:page])
とします。
perは「1ページに何件のworkを表示させるか」を指示する部分です。今回は1ページあたり9作品を表示させるため、.per(9)
とします。
viewを編集
次に、worksのindexページを編集します。ページネーションを実際に表示させたい場所に、以下を追加してください。
=paginate @works
一度ブラウザで確認してみましょう。ページネーションがきちんと表示されましたか?