ページネーションの実装方法

gem 'kaminari'

gemfileに上記のコードを書き、bundle installを使ってインストールします。

ページネーションを実装したいモデルのコントローラで、データを取得するメソッドを作成します。例えば、indexアクション内でデータを取得する場合は以下のコードにします。

def index
  @shops = Kaminari.paginate_array([]).page(params[:page]).per(10)
end

これにより、shopモデルからデータを取得し、pageメソッドでページ番号を指定し、perメソッドで1ページあたりのshop数を指定しています。このコードの場合は1ページに10個の店のを表示します。

次にconfig/initializers/kaminari_config.rbファイルを作成し、以下のように設定します。

Kaminari.configure do |config|
  config.default_per_page = 10
end

ビューファイルにページネーションリンクを表示する場合は以下のコードを記載したいファイルに書き加えます。

<%= paginate @shops %>

これにより、@shopsのページネーションリンクが表示されます。

また、ページネーションのスタイルを変える場合はpplication.cssにコードを書くことで変更が出来ます。

/* application.css */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 必要に応じて適切なマージンを指定してください */
}

/* application.scss */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 必要に応じて適切なマージンを指定してください */
}

この記事が気に入ったらサポートをしてみませんか?