早速ページ内のページャを作成してみた。

早速ページ内のページャを作成してみた。

仕事でページ内のページャを作ったので早速やったことをメモしてみる。
ちょっと適切な用語を知らないので実物を以下に貼ってみる。

See the Pen RJXrbg by blue (@aoiBlue) on CodePen.0

こんな感じで、
サンプルは本当に単純にcssで消したり表示したりでページ遷移してるように見せかけてるだけのもの。

例としてはこれだけでいいのだけど、
実際はページ数が表示するものによって増えたり減ったりしていく。
タグの個数自体はjspだのPHPだの側でforをまわした方が早いと思うので置いておくとして
一定数以上ページがあると、レイアウトが多分すごいことになる。
(100ページくらいあると、右端まで伸びて改行していくことになると思う。)

なので、仮に表示するページャは3個までとしてみる。

実装したのが以下

See the Pen QxOdeq by blue (@aoiBlue) on CodePen.0

解説メモ
・HTML
ただのHTMLのようだ
無駄にbootstorapを使ってお洒落なページャにしております。

・CSS
display:none
とはその要素を画面上に表示しなくなる表記。
これを付けは図示することで、
あたかもページを遷移しているかのように要素を消したり見せたりしている。

・js
上の方でページの制御
ページャの何処かがクリックされたら、
まず全部にnoneクラスを付けて見えなくする。
その後、クリックされた箇所のインデックスに対応するgroupの箇所からnoneクラスをremoveしてあげる。
非常に単純なもの。

下の方(15行目くらいから)で表示するページャの調整を行う。
前後に表示することになる数値を、最初に設定したrange分足し引きして取得。

ここで、表示する最小値or最大値をはみ出してしまう場合があるので
例外処理を入れている。

最後にページャをすべて消してから、
表示する範囲からnoneを取り除く。
という処理をしている。

多分もっといい方法あるけど、今回はこれくらい。

もっと技術力ほしいなぁ。
何かセミナー参加日記とか、技術書読んだよ日記もつけてみたい。
英語力も欲しさがある。