6
4

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 5 years have passed since last update.

【Rails】kaminariを使ってページネーションを実装する方法

Posted at

ページネーションを作るのに、kaminariというgemを使ったのですが久しぶりで忘れてしまっていました。

そこで備忘録として

  • kaminariの導入方法
  • kaminariのカスタマイズ方法

についてまとめてみました。

よかったら参考にしてみてください。

##【Rails】kaminariを使ってページネーションを実装する方法
kaminariによるページネーションの実装は、大きく分けて6つのステップでできます。

###ステップ1:Gemgileに記述
Gemfileに以下のように記述してください。

gem 'kaminari'

image.png

###ステップ2:bundle installする
Gemfileにkaminariを記述したら、ターミナルを開いてbundle installしてください。

image.png

###ステップ3:kaminariの設定ファイルを生成する
次にkanimariの設定ファイルを作ります。

以下のコマンドをターミナルに打ち込んでください。

rails g kaminari:config

以下のように表示されたら成功です。

image.png

###ステップ4:kaminariのviewファイルの生成
次にviewファイルを作ります。
今回はbootstrap4で見た目を整えるので、以下のようなコマンドを打ちました。

rails g kaminari:views bootstrap4

以下のように表示されたら成功です。

image.png

ちなみにBootstrap4を使わない場合は、以下のように打ち込んでください。

rails g kaminari:views default

###ステップ5:controllerにpageメソッドを追加
ページネーションを実装したいアクションを持つcontrollerにpageメソッドを追加しましょう。

.page(params[:page])

例えば、indexアクションに表示される記事一覧(@articles)にページネーションを使いたい場合は、こんな感じで書けばOK。

image.png

pageメソッドを呼び出すことにより、引数に指定したページに表示するデータだけを取得できます。

デフォルトの設定では、1ページに25件のデータが取得されます。

###ステップ6:viewファイルの修正
次にviewファイルを修正していきましょう。

ページネーションを表示したい箇所に以下のコードを書いてください。

<%= paginate @articles %>

以下のように表示されたら成功です。

image.png

##まとめ
kaminari便利!

6
4
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
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?