fluid_27’s blog

勉強した内容をアウトプットするためのブログ

gem 'kaminari' を使ってページネーションを実現

作っているアプリにページネーション機能を追加してみました。

 

ページネーションとは、表示する件数が多い時に、ページで区切って、ページごとに表示させていくやつですね。

ページ下とかにページ遷移のボタンが出てくるアレです。

f:id:fluid_27:20210602002432p:plain

 

実装方法

railsに関しては簡単で gem 'kaminari' を使えばサクッと実装できるみたいです。

 

1. gem 'kaminari' の追加

Gemfile に 

gem 'kaminari'

を追加して、

$ bundle install

 

2. controller側にpage(params[:page])追加

controllerのページネーションを実現したいアクションのところで

def

  index @users = User.all.page(params[:page]).per(10)

end 

というように記述。

page(params[:page])とすることで他ページに遷移するボタンを勝手に作成してくれます。

その後のper(10)は 「10件ごとに1ページ」で区切っていく。という意味。

なので、そこの数字を変えることでページあたりの件数を変えられます。

 

3. view側に <%= pagenate %>追加

viewのページネーションを表示させたい場所に下記のような形で記述を追加。

<%= paginate @users %>

 

4. cssを整える

$ rails g kaminari:views default

 とかすると、kaminari用にviewが作成され、そこのcssを編集することで見た目を整えられる。

bootstrapを使っている場合は

$ rails g kaminari:views bootstrap4

とかで作成すると、bootstrapがそのまま使えるみたい。

 

その他・参考サイト

あとは、他ページに遷移する表示を「次へ」のように日本語化させたりもできるみたいです。

いつもお世話になっている初学者の味方 ・Pikawakaに載っていたので、その辺りは参考にするといいかも思います。

【Rails】 kaminariの使い方をマスターしよう! | Pikawaka - ピカ1わかりやすいプログラミング用語サイト