【Rails】 ページネーションの実装 (ページングしても内容が重複して表示されてうまくページングができない場合の解決法)
railsでページネーションを実装しています。
他の記事でも紹介されていたのを参考に、自分でも実装をしてみましたが、実装したページングのページをめくっても同じ画面が表示されてしまいました。
簡単ですが、そんな時の解決法を紹介します。ページネーションの実装の方法は他に記事が多くありますので最下部に参考がありますのでそちらをご参照ください。
1 kaminariジェムのインストール
gem 'kaminari'
2 bundle installを入力してインストールします。
% bundle install
3 view画面に「= paginate matches」を記入します。
(今回はhamlで記入、部分テンプレートを使用しているので@matchesではなくmatchで使用しています。)
.Under-wrapper .Bar-left .Bar-left__upper .Bar-left__upper--title 応募可能な全てのお仕事を公開しています .Bar-left__upper--text = paginate pages ←ここを追加します
3-1該当するコントローラーにコードを追加します。←ここがポイントでした
記事を参考に私が書いたコードです。@pagesの部分がページングで必要なコードです。
class MatchesController < ApplicationController def index @matches = Job.all.order("created_at DESC") @pages = Job.all.page(params[:page]) end
確かにこれでも下記のように表示はされますが,いざページをめくってみても表示される項目は一緒(重複)の状態でした.....
3-2私の場合すでに@matchesでJobの一覧を表示していましたが、インスタンス変数をもう一つ作成(@pages)して値を呼ぼうとしていました。これが間違いで@matchesで作成したものに「.page(params[:page])」を追加すれば無事にページングもしてくれるようになりました。
class MatchesController < ApplicationController def index @matches = Job.all.order("created_at DESC").page(params[:page]).per(3) end
ローカル変数も「pages」から「matches」に変更します。
.Under-wrapper .Bar-left .Bar-left__upper .Bar-left__upper--title 応募可能な全てのお仕事を公開しています .Bar-left__upper--text = paginate matches ←ここを追加します
これで解決しました!
.per()などの説明は下記の参考記事等をご覧ください。
ページングのデザインの変更方法も記事をご覧ください。
参考記事
公式:
github.com
わかりやすいページネーションの実装の仕方
qiita.com
設定変更のあれこれ
nekorails.hatenablog.com
間違いに気付いた記事
stackoverflow.com