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

どうもおはようポテト(@ohayoupoteto22)です。

Webアプリには欠かせないページネーション。

ということで今回は

という方に向けて「Railsでページネーションを実装する方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

Railsでページネーションを実装する方法

今回の例は質問掲示板で、”質問一覧ページ”にページネーションを実装すると仮定します。

kaminariというGemを使う

簡単にページネーションを実装できるようにしてくれる便利な、kaminariというgemを使っていきます。

gem 'kaminari'
gem 'kaminari-i18n'

Gemfileに上のような指定を加えます。

$ bundle install

そしたらBundlerを使ってkaminariをインストールします。

コントローラーをいじる

def index

@posts=Post.all.reverse_order.page(params[:page]).per(5)

end

そこで、このようにpageメソッドの引数に「params[:page]」と指定することで、選んだページに応じて遷移するようになります。

さらにperメソッドで1ページあたりのレコード数をしています(›´ω`‹ )

ビューをいじる

<%=paginate @posts%>

paginateメソッドを使います。引数にリレーションオブジェクトを指定することでリンクを作成してくれるんですよ。便利。

その結果…

無事、ページネーションが実装できましたね⸝⸝- ̫ -⸝⸝

ページネーションのボタンのカスタマイズ

.pagination{
justify-content: center;/*中央に*/
}
.page{
border: 1px solid #fac678;
border-radius: 100%;
margin-right: 3%;/*スペースを空ける*/
width: 5%;
padding-left: 1%;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.next , .last{
padding-left: 1%;
}