如何在单个HTML页面的两个Tabulator表格中展示同一份JSON文件数据

• HTML 规范要求 id 属性全局唯一，你重复使用 idTable 作为两个表格容器的 id，会导致 Tabulator 初始化时只能识别到第一个匹配的 DOM 节点，第二个容器不会被渲染
• 重复引入同一份 JSON 和 JS 脚本属于冗余操作，还可能引发全局变量冲突、初始化逻辑重复执行覆盖的问题
• 你没有在 JS 逻辑中实现全量数据拆分的规则，两个表格自然无法自动承接数据

1. 调整HTML结构 #

移除重复的脚本引入，给两个表格容器设置唯一id，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="MyCSS.css" >
    <script type="text/javascript" src="node_modules/tabulator-tables/dist/js/tabulator.js"></script>
    <!-- 全局只引入一次共用的数据源和表格逻辑脚本 -->
    <script type="text/javascript" src="saveFile.json"></script>
    <script type="text/javascript" src="tableDesign.js"></script>
</head>
<body>
    <!-- 两个表格容器使用不同的唯一ID -->
    <div id="idTable1"></div>
    <div id="idTable2"></div>
</body>
</html>

注：如果你的 saveFile.json 是纯JSON格式而非变量赋值的JS格式，建议改用 fetch 方法异步拉取数据后再初始化表格。

2. 修改tableDesign.js的初始化逻辑 #

拆分全量数据分别传入两个表格即可，不需要单独复制一份JS和JSON文件，示例代码如下：

// 假设saveFile.json已经将全量数据挂载到全局变量 tableData 上
const fullData = tableData;
// 可自定义第一张表格的最大展示行数，可根据你的表格行高、容器高度调整数值
const firstTableMaxRow = 30;
// 拆分数据
const table1Data = fullData.slice(0, firstTableMaxRow);
const table2Data = fullData.slice(firstTableMaxRow);

// 初始化第一张表格
new Tabulator("#idTable1", {
    data: table1Data,
    // 你原本的表格列配置、样式配置等直接保留即可
    columns: [
        // 你的原有列定义
    ],
    // 其他原有配置项不变
});

// 初始化第二张表格，配置和第一张保持一致即可
new Tabulator("#idTable2", {
    data: table2Data,
    columns: [
        // 和第一张表格相同的列定义
    ],
    // 其他和第一张相同的配置项不变
});

如果需要实现根据容器高度自动计算第一张表格可容纳行数，不需要固定行数的话，可以在第一张表格初始化完成后，调用getRowHeight()方法获取行高、调用getElement().clientHeight获取容器可展示高度，计算出最大可展示行数后再动态拆分数据重新赋值即可。

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