ページングを自作するための考え方

バックエンド側

最終的にDBに対してOFFSET句を使ってテーブルから必要な範囲のデータだけ取得することになる。
この時以下の２つのパラメータが必要になる。

・ offset # 先頭から何レコード目からSELECTするか
・ perPage # １ページが何レコードあるか

Controllerでリクエストからこのパラメータを受け取ってDBにSELECTを発行する。
offsetはOFFSET句、perPageはLIMIT句として使う。
これをJSONなどで取得できるようにルーティングする。

※2022年現在、OFFSET句ではなくWHERE句で絞る方法が高速でおすすめという記事も見ましたがこの記事では割愛します。

フロントエンド側

次ページ・前ページやページ番号ボタンがクリックされたら、バックエンドにoffsetとperPageを載せてリクエストする。
取得したリストをtableタグなどに描画する。

この時、
perPageはあらかじめセレクトボックスの入力値から決められた固定値になる。
offsetは以下の通り算出する。
選んだページ番号をtargetPageとすると、

offset = targetPage × (perPage - 1)

ただし、ページ番号が0以下だったり、最大ペース数より多いことはありえないので、入力チェックを組み合わせる必要がある。

最小は単純に 1 < targetPage かどうかで判定する。
最大の方はあらかじめバックエンドのSQLでCOUNTを発行して行数を取得しておく。

max = count / perPage

targetPage < max であれば取得する。