Webアプリには欠かせないページネーション。
ということで今回は
- Railsで簡単にページネーションを実装したい
- kaminariというgemの使い方を知りたい
という方に向けて「Railsでページネーションを実装する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
Railsでkaminariを使ってページネーションを実装する方法
今回の例は質問掲示板で、”質問一覧ページ”にページネーションを実装すると仮定します。
ブログ主
@postsというインスタンス変数に質問テーブルからのデータを入れます
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メソッドを使います。引数にリレーションオブジェクトを指定することでリンクを作成してくれるんですよ。便利。
その結果…
無事、ページネーションが実装できましたね⸝⸝- ̫ -⸝⸝
しかしちょっと不恰好なのでCSSをいじって多少マシにしてあげます。
くるみ
ページネーションのボタンのカスタマイズ
.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%;
}
適宜CSSを記述してあげれば…
まあまあそれっぽい感じになりましたね。
まとめ
以上、Railsでkaminariを使ってページネーションを実装する方法でした。
ページネーションは頻繁に利用・実装するものだと思うので、こんな簡単にできるのはとても助かりますね。
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝