如何为Tabulator多表格复用同一数据源？（jQuery直播事件场景）

嘿，这个需求其实很好实现，Tabulator自带的过滤机制刚好能解决多表格共享数据源的问题，不用重复加载或复制数据，既高效又省心。下面是具体的实现思路和代码示例：

步骤1：抽离共享数据源与通用配置 #

首先把所有事件数据存在一个变量里，同时把三个表格共用的列配置单独提取出来，避免重复写相同的代码：

// 共享的所有事件数据源
const allEvents = [
  { eventID: 1, eventName: "技术直播峰会", eventStatus: "Live" },
  { eventID: 2, eventName: "产品发布会", eventStatus: "Finished" },
  { eventID: 3, eventName: "新手入门培训", eventStatus: "Upcoming" },
  // 更多事件数据...
];

// 三个表格共用的列配置
const commonColumns = [
  { title: "Event ID", field: "eventID" },
  { title: "Event name", field: "eventName" },
  { title: "Event status", field: "eventStatus" },
  // 其他需要的列...
];

步骤2：为每个表格配置专属过滤规则 #

初始化三个表格时，通过dataFilter选项指定各自的过滤逻辑，让每个表格只展示对应状态的事件：

进行中（Live）表格 #

new Tabulator("#live-table", {
  layout: "fitColumns",
  columns: commonColumns,
  data: allEvents, // 传入共享数据源
  dataFilter: function(data){
    // 只保留状态为Live的事件
    return data.filter(event => event.eventStatus === "Live");
  }
});

已结束（Finished）表格 #

new Tabulator("#finished-table", {
  layout: "fitColumns",
  columns: commonColumns,
  data: allEvents,
  dataFilter: function(data){
    return data.filter(event => event.eventStatus === "Finished");
  }
});

待开始（Upcoming）表格 #

new Tabulator("#upcoming-table", {
  layout: "fitColumns",
  columns: commonColumns,
  data: allEvents,
  dataFilter: function(data){
    return data.filter(event => event.eventStatus === "Upcoming");
  }
});

步骤3：数据源更新时同步所有表格 #

如果之后需要更新数据源（比如获取到新的事件数据），只需要修改allEvents变量，再调用每个表格的refreshFilter()方法，三个表格就会同步更新：

// 示例：添加一条新的直播事件
allEvents.push({ eventID: 4, eventName: "开发者沙龙", eventStatus: "Live" });

// 刷新所有表格的过滤结果
document.querySelector("#live-table").tabulator.refreshFilter();
document.querySelector("#finished-table").tabulator.refreshFilter();
document.querySelector("#upcoming-table").tabulator.refreshFilter();

额外优化：复用基础表格配置 #

如果三个表格的布局、样式等其他配置完全一致，还可以把基础配置抽成变量，进一步简化代码：

const baseTableConfig = {
  layout: "fitColumns",
  columns: commonColumns,
  data: allEvents
};

// Live表格
new Tabulator("#live-table", {
  ...baseTableConfig,
  dataFilter: data => data.filter(e => e.eventStatus === "Live")
});

// Finished表格
new Tabulator("#finished-table", {
  ...baseTableConfig,
  dataFilter: data => data.filter(e => e.eventStatus === "Finished")
});

// Upcoming表格
new Tabulator("#upcoming-table", {
  ...baseTableConfig,
  dataFilter: data => data.filter(e => e.eventStatus === "Upcoming")
});

这种方式的好处是所有表格共享同一数据源，避免了数据冗余，后续维护时只需要修改一处配置或数据，就能同步更新三个表格，非常方便。

内容的提问来源于stack exchange，提问作者toryan