前後のレコードを取得して、前後ページ移動する
はじめに
よくブログなどで見る、
<前のページ 次のページ>
でページ遷移をする機能を現在制作中のプロダクトに実装します。
調べた内容を極力シンプルにまとめました。
プロダクトは個人間取引を行うもので、今回実装するものは
商品を見ていくときの利便性を向上させるものです。
今回は出品された商品の詳細を表示するページに前後のリンクを実装します。
特にカラム別に分けることなく、全てのレコードを新着順で並べて前後していきます。
狙い
出品された順にページを前後するリンクを実装します。
<前のページ 次のページ>
といった表示で、ページ遷移をします。
実装
今回はitems_controllerのshowアクションにて行います。
まず商品の情報を取得します。
def show
@item = Item.find(params[:id])
end
次にitemモデルにて、メソッドを定義します。
where,order,firstメソッドを用いてpreviousメソッドとnextメソッドを定義して使用します。
def previous
Item.where("id < ?", self.id).order("id DESC").first
end
def next
Item.where("id > ?", self.id).order("id ASC").first
end
whereメソッド
https://railsguides.jp/active_record_querying.html#%E6%9D%A1%E4%BB%B6
orderメソッド
https://railsguides.jp/active_record_querying.html#%E4%B8%A6%E3%81%B3%E9%A0%86
firstメソッド
https://railsguides.jp/active_record_querying.html#first
ビューは以下の通りです。
最初の前のレコードと最後の次のそれは存在しないので条件分岐で分けましょう。
- if @item.next.present?
= link_to "次のページ>", item_path(@item.next)
- if @item.previous.present?
= link_to "<前のページ", item_path(@item.previous)
拡張機能 blank? present?
https://railsguides.jp/active_support_core_extensions.html#blank-questionmark%E3%81%A8present-questionmark
実際の実装では商品の名前を表示させたので以下のようにしました。
また、itemテーブルにnameカラムを設定しています。
- if @item.next.present?
= link_to item_path(@item.next) do
<
= @item.next.name
- if @item.previous.present?
= link_to item_path(@item.previous) do
= @item.previous.name
>
※途中にある<>は<前のページ 次のページ>、の両端に置いてあるものです。特に指定はありません。
完成例
前後の商品の名前が表示され、実際にリンクを実装できました。
おわりに
今回はテーブルにある全てのレコードの新着順で前後ページのリンクを実装しました。
ユーザー別、グループ別など持っている属性のまとまりの中で実装されている方がいらっしゃたのでリンクを載せておきます。
また参考にさせていただいた記事の作成者の方々、感謝申し上げます。
ありがとうございました。
参考リンク
https://qiita.com/hrtkmztn/items/df09584cfc621699532c
こちらはグループ内で投稿されたもので実装されてます。
アソシエーションや変数などに手を加える必要があるようです。
それぞれのユーザーが出品した商品一覧の前後を遷移するリンクを試作しましたが、実装できました。
https://easyramble.com/active-record-prev-next.html
previous, nextメソッドの実装に取り入れました。
https://www.for-engineer.life/entry/get-record/
こちらもよくまとめられています。