View on GitHub

表格管道

Bootstrap Table 的管道扩展。

此插件启用服务器端请求的客户端数据缓存,这将消除每次页面更改都需要发出新请求的需求。这将在一次性返回所有数据(客户端分页)和发出新的服务器端请求(服务器端分页)之间为大型数据集提供性能平衡。

有两个新选项:

  • usePipeline: enables this feature
  • pipelineSize: the size of each cache window

管道大小必须能被当前页面大小整除。这是通过向上取整到最近的可整除值来保证的。例如,如果管道大小是 4990,当前页面大小是 25,那么管道大小将动态设置为 5000。

缓存窗口是根据管道大小和服务器端查询返回的总行数计算的。例如,管道大小为 500,总行数为 1300,缓存窗口将是:

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

使用限制(即 pipelineSize)和偏移量参数,服务器端请求必须仅返回请求的缓存窗口中的数据总行数。 换句话说,服务器端代码必须使用偏移量和限制参数来准备响应数据。

在页面更改时,检查新的偏移量是否在当前缓存窗口内。如果是,则从缓存数据集返回请求的页面数据。否则,将为新的缓存窗口发出新的服务器端请求。

当前缓存数据仅在以下事件中失效:

  • 排序
  • 搜索
  • 页面大小更改
  • 页面更改移动到新的缓存窗口

有两个新事件:

  • cached-data-hit.bs.table: issued when cached data is used on a page change
  • cached-data-reset.bs.table: issued when the cached data is invalidated and the new server-side request is issued

使用方法

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

示例

管道

选项

pipelineSize

  • 类型: 数字
  • 描述: 每个缓存窗口的大小。必须大于 0。
  • 默认值: 1000

usePipeline

  • 类型: 布尔值
  • 描述: 设置为 true 以启用管道
  • 默认值: false

事件

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

  • 当分页可以使用本地缓存数据时触发。

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

  • 当本地缓存数据需要重置时触发(例如排序、搜索、页面大小更改或页面超出当前缓存窗口)。