GitHubで見る

テーブルパイプライン

Bootstrap Tableのデータパイプライン拡張機能。サーバー側リクエストにクライアント側データキャッシュを提供し、ページネーションのパフォーマンスを最適化します。

このページ

この拡張機能は、サーバー側ページネーションリクエストに対してクライアント側データキャッシュ機能を提供し、ページをめくるたびに新しいサーバー側リクエストを発行することを回避します。大量のデータを処理する際、以下の2つの極端な状況の間でパフォーマンスの妥協案を提供します：

クライアント側ページネーション：すべてのデータを一度にクライアント側に返す
サーバー側ページネーション：ページをめくるたびにサーバー側からデータを再取得する

2つのコアオプションが追加されました：

usePipeline：データパイプラインキャッシュ機能を有効にする
pipelineSize：各キャッシュウィンドウのサイズを設定する

キャッシュウィンドウの説明

キャッシュウィンドウのサイズは、現在の1ページあたりの行数で割り切れる必要があります。プラグインは自動的に最も近くて割り切れる値に調整されます。例：

パイプラインサイズを4990に設定し、1ページあたり25行を表示する場合、動的に5000に調整されます

キャッシュウィンドウは、pipelineSizeとサーバー側から返された総行数に基づいて自動的に計算されます。例えば、キャッシュサイズが500で総行数が1300の場合、以下のキャッシュウィンドウが生成されます：

[
  {
    "lower": 0,
    "upper": 499
  },
  {
    "lower": 500,
    "upper": 999
  },
  {
    "lower": 1000,
    "upper": 1499
  }
]

サーバー側の要件

サーバー側インターフェースは、limit（つまりpipelineSize）とoffsetパラメータに基づいて指定された範囲のデータを返し、同時に総行数も返す必要があります。したがって、サーバー側はoffsetとlimitを使用して応答データを組み立てる必要があります。

キャッシュ使用メカニズム

ページをめくるとき、新しいoffsetが現在のキャッシュウィンドウ内にあるかどうかをチェックします：

ウィンドウ内にある場合、ローカルキャッシュデータを直接返します
それ以外の場合、サーバー側に新しいキャッシュウィンドウデータをリクエストします

キャッシュ無効化条件

以下の状況により、現在のキャッシュが無効になり、新しいサーバー側リクエストが発行されます：

並べ替え操作
検索操作
1ページあたりの行数の変更
新しいキャッシュウィンドウへのページ移動

新しいイベント

cached-data-hit.bs.table：ページをめくったときにローカルキャッシュデータがヒットしたときにトリガーされます
cached-data-reset.bs.table：キャッシュが無効になり、新しいサーバー側リクエストを発行する必要があるときにトリガーされます

使用方法

<script src="extensions/pipeline/bootstrap-table-pipeline.js"></script>

例

オプション

pipelineSize

属性: data-pipeline-size
型: Number
詳細:

各キャッシュウィンドウのサイズ。0より大きい必要があります。
デフォルト値: 1000

usePipeline

属性: data-use-pipeline
型: Boolean
詳細:

true に設定するとパイプラインキャッシュを有効にします。
デフォルト値: false

イベント

onCachedDataHit (cached-data-hit.bs.table)

パラメータ: undefined
詳細:

ページをめくったときにローカルキャッシュデータがヒットしたときにトリガーされます。

onCachedDataReset (cached-data-reset.bs.table)

パラメータ: undefined
詳細:

ローカルキャッシュをリセットする必要がある場合（並べ替え、検索、ページサイズの変更、または現在のキャッシュウィンドウを超えたページ移動など）にトリガーされます。