0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

kaminariとoffset_value

Posted at

gem kaminariの連番表示に悩まされた備忘録です。

状況背景

  • チーム開発の課題でページネーションを実装
  • 表示していたアイテムに連番を表示させる
  • 12件/ページ が実装条件
  • アイテムの表示にはコレクションレンダリングを使用
  • 次のページに行くと連番が1に戻ってしまう
  • kaminari導入前は連番は_counter変数で表示していた
  • offset_valueを使い連番表示するのが実装条件

結論

ページネーションで連番を表示するには下記で解決できた

_counter変数 + xx.offset_value + 1

解決までの道のり

今回のハマりポイントは

  1. offset_valueについて調べても情報が少ない
  2. offset_valueずっと0なんだけど
  3. 2ページ目にすると今度は12で固定なんだけど
  4. そもそもoffsetって何?
  5. あ、わかったかも?
    という感じで順を追っていきます。

offset_valueの情報が少ない

大体どんな機能があるのかと思ってGoogle先生rails offset_valueで質問してみたけど offset_value自体がkaminariの独自?のものだと知らなかったので、見つけるのはkaminariの基本的な使い方に関する物が多くoffset_valueについて詳しい記事は見当たらなかった。(今思うと納得)

offset_value ずっと 0 問題

とりあえず情報が無いならとりあえず動かして見れば良い
という事でビューにxx.offset_valueを入れてみる
表示されるのは「0」
イメージでは「1~12」とか羅列されるのかと思ってたので思考が5秒止まった。
「え、何これ、どうしろと?」

2ページ目は12で固定問題

「まぁ0はわかった。じゃあ2ページ目はどうなるの?」
今度は12のまま変化なし。
ビューにbinding.pry入れても数値確認しても変わらないし
「あーもう無理だ分からん。詰んだ。」と同時に1つ疑問を残していた事に気付く。

「そもそもoffsetってなに?」問題

普通に「あーoffsetねー」みたいにしてたけど、「ってかoffsetってなによ?」だったのでこちらで調べる。(「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典)
こちらによると「offset」とは

基準点からの距離で位置を表現したものが「オフセット」です。

ポイントは

・位置を表現している

・基準点がどこかにある

・距離(基準点からどれくらいズレているか)で表現している

の3つでしょうかね。

「オフセット」って単語が出てきたら「基準点からの距離で表した位置なんだな~」と、お考えください。

なるほど、なんとなくわかった気がする。

あ、わかったかも?

そもそもの間違いとしてoffset_valueだけで解決できると思っていたのが間違いだった。
binding.pryでみていた時にoffset_valueが一定の値で固定されるが_counter変数はレンダリングされた回数を表示するので増えて行った
この二つの要素を使えばいけるのでは?と思い上記の結論部分に辿り着き、無事実装完了しPR作成に至るのでした。

参考資料

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?