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

Railsのページネーション

SHARE

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を使ってページネーションを実装する方法でした。

ページネーションは頻繁に利用・実装するものだと思うので、こんな簡単にできるのはとても助かりますね。

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

コメントを残す

CAPTCHA


前の記事

ブルーロックの最強キャラランキング
【最新版】ブルーロック最強ランキングTOP15

次の記事

【一括置換を簡単にする】Search and Replaceの…
【一括置換を簡単にする】Search and Replaceの使い方