表のページ区切り動作の更新
ページに表示されるレコード数と表示されるレコードの合計数を制御することで、テーブルのパフォーマンスと使いやすさを向上させることができます。
表のレコードの合計数およびページ区切りを調整する前に考慮する項目は次のとおりです:
- 最初はスクロール時にわずかな遅延が発生してさらに多くのレコードをロードするか、レコードのロード時に初期遅延が発生し、スクロールがよりスムーズになります。
scroll-policy-options.fetch-sizeプロパティは、最初にフェッチされるレコード数を制御します。 たとえば、このプロパティを高数に設定すると、開始時に多数のレコードがフェッチされ、スクロールはスムーズになりますが、初期フェッチは少し遅くなり、クライアントでより多くのメモリーを消費します。 - また、ユーザーがフェッチできる合計レコード数を制限して、クライアントでのネットワーク・トラフィックおよびメモリー消費量を制御することもできます。 JET表のデフォルトは500に設定されていますが、表の
scroll-policy-options.max-countプロパティを使用して変更できます。
ノート:
表の使いやすさをさらに向上させるには、表に対して「フィルタリング・コントロールの追加」を検討して、リストするレコードを表示する検索基準をユーザーが定義できるようにします。ページ区切りおよび表示されるレコード合計を調整するには、次の操作を行います:
- 「表へのページ区切りコントロールの追加」:各ページに表示されるレコード数を制限し、表示されるレコードの合計数を制御します。
- 「すべてのレコードをロードするように表を設定」:表がページにロードされたときにすべてのレコードをフェッチします。
表へのページ区切りコントロールの追加
ユーザーはブラウザのスクロール・バーを使用して表に表示されている行をスクロールできますが、ほとんどの場合、表の高さを制限して、一度に特定の数のレコードのみを表示するようにします。
表の高さを設定すると、ページングが自動的に実装され、一度に固定数のレコードがフェッチされます(デフォルトは25です)。
ノート:
ページ区切りを効率的に機能させるには、バックエンド・サーバーでページ区切りをサポートする必要があります - Visual Builderビジネス・オブジェクトおよびSaaSサービスは、この機能をすぐにサポートします。 ページ区切りをサポートする他のRESTサービスの場合、変換機能をサービス定義の一部として定義する必要があります。ページ区切りコントロールを表に追加するには:
app.cssに新しいCSSクラスを定義します。 アプリケーションをデザイナで開き、次に示すように「リソース」およびcssノードを展開します。 この行をapp.cssに貼り付け、高さを500pxから必要な行数を示す高さに変更します:.tableheight {height : 500px;}- ページの「ページ・デザイナ」タブに移動し、キャンバス上の表を選択し、プロパティ・ペインで「すべて」タブを選択します。 検索ボックスに
classと入力して表のclassプロパティを持ち、classプロパティにtableheightと入力します:
表示される合計行数および一度にフェッチされる行数を微調整するには:
- キャンバスで表を選択した状態で、プロパティ・ペインで「すべて」をクリックし、検索ボックスに
scrollと入力します。 - ポリシー・オプションのスクロールプロパティの右端にある矢印をクリックします:
- ポリシー・オプションのスクロールを調整します:
- 「フェッチ・サイズ」プロパティには、最適なフェッチ・サイズを入力します。
- 「最大数」プロパティには、表に表示されるレコードの合計数を入力します。
ノート:
表とデータ・ソースの同期を維持するには、SDP pagingCriteriaの#maxSizeプロパティをscroll-policy-options.max-count 表の設定と一致するように設定することをお薦めします。
すべてのレコードをロード
スクロール・ポリシーを「すべてロード」に設定すると、すべての表データを一度にページにロードできます。
- キャンバスで表を選択した状態で、プロパティ・ペインで「すべて」をクリックし、検索ボックスに
scrollと入力します。 - スクロール・ポリシードロップダウン・メニューから、すべてロードを選択します:
表がアプリケーションに表示されると、すべての表データがフェッチされてレンダリングされます。
oj-tableコンポーネントのスクロール・プロパティの詳細は、「Oracle Jet - oj.table要素」を参照してください。