ミニアプリにページネーション機能を実装したい

皆さんこんにちは。ハマッキーです。

今回は自分の作ったアプリのビュー画面にページネーション機能を実装したいと思い、この記事を書こうと思った次第です。

ページネーション機能とは、名前だけだと「？？」ってなる方もいるかもですが、

Googleとかでおなじみのコレです。

要は各ページごとに決まった数のサイトが貼られていて、1,2,3…といくにつれ別のページを表示させてくれます。

流石にブログ投稿画面一覧に投稿した記事が全て表示されるのではごちゃごちゃしていて見にくいですよね。

というわけで、早速この機能を実装していきたいと思います。

まず、このページネーションを実装するためにkaminariをインストールします。

そのために、アプリのGemfileに gem 'kaminari'と記述し、ターミナルでカレントディレクトリが今開発しているアプリであることを確認したら、ターミナルで bundle install　と入力しkaminariをインストールします。

次に、ページ一枚に付き、記事を何個表示させるのかを指定していきます。

まず、何もしていないのがこちらです。

では、ページ一枚につき何件の投稿を表示させるのかを決めていきます。今回は一枚につき5件の投稿を表示させることにします。

kaminariをインストールすると、pageとperという2つのメソッドが使用可能になります。これらについてざっくり解説すると、

・pageメソッド・・・ページネーションでのページ数を指定する。ビューリクエスト時にparamsの中にpageというキーが追加され、この番号がページ数となる。

・perメソッド・・・・一枚のページにつき、何個のコンテンツを表示させるのかを決定する。

という感じになります。

これらのメソッドを使って、コントローラーファイルをいじっていきます。

一覧表示なので、indexメソッドに手を加えていきます。

order("created_at DESC")の部分は、新たに投稿された記事を上位に表示するという意味です。

そして先程の一覧画面に戻ると、

ちゃんと5件だけ表示されているのでうまく適用できました。

しかし、「二ページ目に飛ぶためのリンクはどこやねんボケ！」って感じですね。

ページネーションのリンクを表示させるためには、ビューファイルにpiginateメソッドを使います。

ではこれで一覧画面を見てみましょう。

無事追加できました。

レイアウトはガバガバですが、なんとかページネーション機能を実装することができましたね。次回はログイン、ログアウト機能を追加していきたいと思います。

というわけで、今回はページネーションについてのお話でした。

ミニアプリ開発は楽しい😋

それでは、次の日記でお会いしましょう！

コメント、ご意見お待ちしています！