ページネーション
Pagination
入力/出力
所感など
ページネーションのデモです。
流石に実用する場合はこのまま使うこともないし多分実装するときはPHPとかで書き直すんじゃないかなと思いますが、「一回作っとけば知識が後々何かの役には立つだろ...」と思って実装してみました(適当)
端の方でページネーションの出し方を切り替えるのが面倒でしたが、これをやっとくと最大ページが多くなっても一定の幅で済むのでありがたいですね。
しかしかなりゴリ押しの実装になった(1ページ切り替わるたびにページネーション全部消して新しく全部描画し直したりしてる)ので、あとからどうにかしてスッキリさせたいところ。
とか言って実際にちゃんと書き直したことあんまりないですけどね…。
2025.11.26(水)追記:
あまりにもゴテゴテしていたので書き直しました。
少なくとも同じような処理を繰り返しているところくらいはまとめようということで、ページ番号の描画・省略記号の描画は関数としてまとめました。
また、前回はページの端で前・次ボタンを押してもreturnで何も起こらないような処理にしていたのですが、今回のリライトで端に来たときはちゃんと対応するボタンが明示的に死ぬ(= disabled化)ようにしてみました。
描画ロジックに前・次ボタンの描画も組み込めば端に来たときにそもそも出さないという処理もできますが、今回は前・次ボタンをまず置いて、それにイベントリスナーを付ける方式にしていたため、そこから書き直すのは面倒だなと思い、disabledの付け外しで対応するようにしました(カス)
実はこのページネーションシステムはすでに個人用の掲示板お気に入りスレッド登録システムにPHPで実装しており、実用しています。
ほとんどこのJSで作ったページネーション描画関数と同様のものをそのまま流用することができたので先に作っといてよかった~~~~