ページネーション

アクションの実行結果を取得する際に、ページネーションで結果を都度を設定できます。

ページネーションに必要な作業はページネーション時に利用するパラメーターをシステム値として定義すること、そしてそれらのシステム値を使って結果表示のカスタマイズでページネーションの設定を行なうことです。

ページネーションの種類

ページネーションの方式にはいくつか種類があります。

• オフセット式ページネーション
• カーソル式ページネーション

データソースのインターフェースに合わせてどちらをご利用するかお選びください。

オフセット式ページネーション

オフセット式ページネーションは、ページごとのデータ数と開始地点を使ってページネーションをするパターンです。

パラメーターの設定

オフセット式の場合、2つのパラメーターをシステム値として用意します。

• オフセット値（ページの開始地点）
• ページサイズ（ページごとのデータ数）

これらの値は前後のページに移動するたびにベースマキナ上で値が更新されます。

下記の例ではSQLのアクションにオフセット式ページネーションのパラメーターを利用しています。

それぞれ offset, limit という値で取り扱っています。

ページネーション設定の紐づけ

ページネーションの設定は結果表示のカスタマイズから行なえます。

初期状態ではページネーションはしない設定が適用されています。

オフセット式ページネーションを選択すると、ページサイズ（ページごとのデータ数）の設定欄と、システム値を紐づける選択欄が表示されます。

さきほどパラメーターの設定で用意したシステム値を選び、移動時に計算されたページネーション関連の値がアクションに受け渡されるようにしてください。

ページネーションの動作

ページネーションの設定を保存したあと、ページを再読み込みしてアクションを再実行するとページネーションが有効になった状態で結果を見れます。

結果一覧のテーブルの下部に、ページネーション用のカーソルが表示されます。左右の矢印を押すとシステム値に渡される値が変わり、前後のページに移動できます。

オフセット形式の場合は現在のページ番号を保持しているため、それもカーソルとともに表示されます。

カーソル式ページネーション

カーソル式ページネーションは、パフォーマンスに優れているページネーションの方法でデータの数が多いときによく使われ、Infinite ScrollやAPIなどで使用されることもあります。

なお、このページネーション方法を取る場合はユーザーの皆さまのAPI側の実装がカーソルの値を受け付けられることが前提です。

パラメーターの設定

カーソル式の場合は以下の2通りのどちらかの移動形式を取ります。

• 後方向に次々にページ移動する
• 前後のページに移動する

後方向に次々にページ移動する場合

次のページ移動に使うカーソル文字列を受け付ける値だけをシステム値として用意します。

前後のページに移動する場合

上記に加えて、前方向のページ移動に使うカーソル文字列を受け付ける値をシステム値として用意します。

ページネーション設定の紐づけ

ページネーションの設定は結果表示のカスタマイズから行なえます。

カーソル式ページネーションを選択すると、必須・任意両方の設定値の入力欄が表示されます。

後方向には必ずページ移動できることを想定しているので、以下の3つの値は必須です。

• has_next（次のページが存在するか）
• next_cursor（次のページを指し示すカーソル文字列）
• next_cursor変数（次のカーソルをどのシステム値のパラメーターに紐づけるか）

また、前方向にも移動したい場合は以下の3つの値も設定してください。

• has_prev（前のページが存在するか）
• prev_cursor（前のページを指し示すカーソル文字列）
• prev_cursor変数（前のカーソルをどのシステム値のパラメーターに紐づけるか）

next_cursorのように、入力欄が2つ並んでいる設定箇所は、左側が入力値を計算するためのJavaScriptの入力欄、右側が現在表示されている実行結果から値を実際に抜き出してきたときの実行結果を表しています。

そのため、初期状態では右欄の表示がnullになっています。

実際の設定例として、簡易的に30件ずつ値が返ってくるページネーションを想定します。

has_nextには30件ちょうどで値が返ってくる場合であれば次のページが存在すると仮定してJavaScriptの条件文を設定します。

次に、next_cursorにはカーソルとして配列の末尾のIDを指定しています。

このように毎回返ってくるレスポンスの内容を、次のページネーションの情報として受け渡すことができます。

なお、どのようなレスポンスをもとにしてJavaScriptを書けばよいか知りたいほうは、結果の加工と同様に結果の加工スクリプトのタブの加工前のデータをご確認ください。

最後に、上でJavaScript経由で取得されたカーソル文字列をどのシステム値のパラメーターに紐づけるかを設定します。

さきほどパラメーターの設定で用意したシステム値を選び、移動時に計算されたページネーション関連の値がアクションに受け渡されるようにしてください。

ページネーションの動作

ページネーションの設定を保存したあと、ページを再読み込みしてアクションを再実行するとページネーションが有効になった状態で結果を見れます。

オフセット式とは異なり、現在のページ番号を保持していないため、has_nextとhas_prevのフラグ値に応じたカーソルの矢印のみが表示されます。