インタラクティブテーブルのページ送り – T Project　TULIPサポートサイト

アプリ上で表示させるインタラクティブテーブルのページを送る場合、ウィジェットの下の方に表示されるページ番号をクリックする必要がありますが、本記事ではインタラクティブテーブルのフィルタを活用することで、ページ番号ではなくボタンをクリックしてページ送りを実現する方法をご紹介します。

前提条件

テーブルに順序を示す整数タイプのフィールドが必要です。
本記事では「順序」というフィールドをテーブルに用意して使用します。
本記事では1～15まであるテーブルレコードを1ページに10行ずつ表示させる想定で設定を行います。
使用するテーブル：

設定方法

テーブルに順序のフィールド、クエリと集計を追加する

フィールドの追加（作成方法はこちらをご確認ください）
- フィールドタイプ：整数
クエリの追加（作成方法はこちらをご確認ください。
- クエリ名：順序で抽出（本記事では順序というフィールドを使用しているため）
- クエリフィルタ：なし
集計の追加（作成方法はこちらをご確認ください。）
- 集計名：順序の最大値
- 計算：最大
- フィールド：順序

インタラクティブテーブルにフィルタを追加する

App Editor画面上部のツールバーよりインタラクティブテーブルを挿入し、画面右側ウィジェットタブにてデータソースに表示させたいテーブルを設定した後、テーブルフィールドにて表示させたいフィールドを選択する
ウィジェットタブのフィルタ横にある鉛筆マークをクリックし、フィルタの設定画面を開く
下記フィルタを追加する
- フィルタ①：順序右記以上変数. 順序（先頭）
  ※フィルタ画面上で変数を選択し、変数名を入力すると変数の作成が可能です。
  　本記事では変数名を「順序（先頭）」とします。
  ※変数作成時、デフォルト値を「1」に設定してください。
- フィルタ②：順序右記以下変数. 順序（後尾）
  ※フィルタ画面上で変数を選択し、変数名を入力すると変数の作成が可能です。
  　本記事では変数名を「順序（後尾）」とします。
  ※変数作成時、デフォルト値に1ページに表示させたい行数の最大値を設定してください。
  　本記事では1ページに10行を表示させたいため、デフォルト値を「10」とします。

ボタンにトリガを追加する

画面上部のツールバーよりボタン2つを挿入し、ボタン名を変更する
ボタン①：次のページへ
ボタン②：前のページへ
「次のページへ」ボタンに下記の通りトリガを追加する
- トリガ名：次のページへ遷移する
- If文①
  - 条件：式変数.順序（先頭）+10>＜＝>テーブル集計.最大値
  ※条件を付けて、必要以上にページが遷移しないよう制御します。
  -アクション①：データ操作>数を足す>値：変数.順序（先頭）>足す数>固定値 10
  -アクション②：データ操作>数を足す>値：変数.順序（後尾）>足す数>固定値 10
  ※足す数は1ページに表示させたい行数と同じにしてください。
  　本記事では1ページに10行を表示させたいため、「10」としています。
- If文②
  - 条件：なし
  - アクション：エラーを表示>固定値>テキスト>「これより先のページはありません。」
  ※先のページがない場合にエラーを表示させるようにします。
「前のページへ」ボタンに下記の通りトリガを追加する
- トリガ名：前のページへ遷移する
- If文①
  - 条件：式変数.順序（先頭）+10>＞＝>固定値>整数 1
  ※条件を付けて、必要以上にページが遷移しないよう制御します。
  - アクション①：データ操作>数を減らす>値：変数.順序（先頭）>減らす数：>固定値 10
  - アクション②：データ操作>数を減らす>値：変数.順序（後尾）>減らす数：>固定値 10
  ※減らす数は1ページに表示させたい行数と同じにしてください。
  　本記事では1ページに10行を表示させたいため、「10」としています。
- If文②
  - 条件：なし
  - アクション：エラーを表示>固定値>テキスト>「これより前のページはありません。」