ページング
大量データをページ単位で分け、画面表示を軽くします。
ページングは、一覧に表示するデータを一定件数ごとに分け、1ページ目、2ページ目、次へ、前へと移動できるようにする機能です。Roundtableでは「1ページに何件出すか」「検索条件とページ番号をどう連動させるか」「全件数や現在位置を見せるか」を言葉にしておくと、発注者、実装者、AIに指示する人の認識を合わせやすくなります。
この機能でできること
顧客、案件、問い合わせ、申込、注文、予約、ログなど件数が多い一覧を、10件、20件、50件のような単位で分けて表示できます。初回表示を軽くし、利用者は検索結果の件数や現在ページを見ながら、前後のページや指定ページへ移動できます。
大量データを一度に出さず、必要な範囲だけ見せるための基本機能です。
検索、列ソート、表示件数、CSV出力と一緒に考えると、一覧の操作感と処理負荷を両方そろえやすくなります。
よくある利用場面
顧客・会員一覧
数百件以上の顧客や会員を、検索条件ごとに分けて確認します。
申込・注文・請求一覧
期間や状態で絞り込んだ結果を、ページ単位で追いながら確認や処理を進めます。
履歴・ログ一覧
操作履歴、通知ログ、アクセスログなど、増え続けるデータを軽く表示します。
プロンプト例
対象一覧、初期表示件数、ページ移動の見せ方、検索や並び替えとの連動、スマホ時の表示をセットで伝えると、使いやすいページングになります。
プロンプト
申込一覧にページングを追加してください。初期表示は20件にし、一覧下部に「全128件中 1-20件を表示」と前へ、ページ番号、次へのボタンを出してください。検索条件や状態絞り込みを変更したら1ページ目に戻し、列ソート後も同じ条件でページ移動できるようにしてください。スマホではページ番号を省略して前へ、現在ページ、次へだけ表示してください。
この機能を使うときのポイント
表示件数10件、20件、50件など、一覧の列数や利用頻度に合わせて初期件数を決めます。
現在位置全件数、表示範囲、現在ページを出し、利用者が結果のどこを見ているか分かるようにします。
検索との連動検索条件を変えたときは1ページ目に戻し、ページ移動時は条件を維持します。
件数が多い処理全件を画面に出さず、必要な件数だけ取得して表示する前提で設計します。
この機能を実装するときのコツ
管理側では標準一覧のページングを優先し、検索条件、ソート、表示件数がページ移動で失われないかを確認します。公開側ではURLに出してよい条件と、セッションやPOSTで保持する条件を分けます。ページ番号だけを先に作るのではなく、全件数の取得方法、最終ページの扱い、検索結果が0件の場合、スマホでのボタン数までまとめて確認すると、運用中の違和感を減らせます。