Tabulator中双向渐进式加载实现方案问询

核心思路 #

Tabulator原生的ajaxProgressiveLoad仅支持向下渐进加载，要实现双向无限滚动（滚动过的数据自动丢弃，向上滚动重新加载），需要通过监听滚动事件手动控制数据的加载与移除——核心是维护当前显示的数据范围，结合滚动位置触发对应数据的请求与旧数据清理。

实现步骤与代码示例 #

1. 表格基础配置 #

先初始化表格，禁用原生渐进加载逻辑，改用自定义请求：

const table = new Tabulator("#your-table-id", {
    height: "700px", // 固定高度触发滚动容器
    ajaxURL: "/your-data-api",
    ajaxParams: { page: 1, pageSize: 60 }, // 自定义每页数据量
    columns: [
        // 替换为你的列配置
        { title: "ID", field: "id" },
        { title: "名称", field: "name" }
    ],
    ajaxResponse: (url, params, response) => {
        // 适配你的API返回格式，返回纯数据数组
        return response.data.list;
    },
});

2. 滚动监听与数据控制 #

获取表格滚动容器，监听滚动事件，判断滚动方向与阈值，触发数据加载和旧数据清理：

const scrollContainer = table.element.querySelector(".tabulator-tableHolder");
let isLoading = false; // 防止重复请求
let currentPage = 1;
const pageSize = 60;

// 封装数据请求函数
const fetchPageData = async (page) => {
    const response = await fetch(`/your-data-api?page=${page}&pageSize=${pageSize}`);
    const resData = await response.json();
    return resData.data.list;
};

// 滚动事件处理逻辑
scrollContainer.addEventListener("scroll", async (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target;

    // 向下滚动：距离底部150px时加载下一页，同时清理最旧的一页数据
    if (scrollTop + clientHeight >= scrollHeight - 150 && !isLoading) {
        isLoading = true;
        const nextPage = currentPage + 1;
        const newData = await fetchPageData(nextPage);
        
        // 若当前数据量超过2页，删除最早的一页
        if (table.getDataCount() >= pageSize * 2) {
            const oldRows = table.getRows().slice(0, pageSize);
            oldRows.forEach(row => row.delete());
        }
        
        table.addData(newData);
        currentPage = nextPage;
        isLoading = false;
    }

    // 向上滚动：距离顶部150px时加载上一页，同时清理最新的一页数据
    if (scrollTop <= 150 && currentPage > 1 && !isLoading) {
        isLoading = true;
        const prevPage = currentPage - 1;
        const newData = await fetchPageData(prevPage);
        
        // 若当前数据量超过2页，删除最新的一页
        if (table.getDataCount() >= pageSize * 2) {
            const oldRows = table.getRows().slice(-pageSize);
            oldRows.forEach(row => row.delete());
        }
        
        // 将新数据添加到表格开头
        table.addData(newData, true);
        // 调整滚动位置，避免添加数据后滚动条跳变
        e.target.scrollTop = scrollTop + (newData.length * table.rowManager.rowHeight);
        
        currentPage = prevPage;
        isLoading = false;
    }
});

3. 关键注意事项 #

• 固定行高：建议设置rowHeight固定值，否则滚动位置调整会出现误差，影响体验。
• 请求防抖：通过isLoading状态严格控制请求并发，避免同一时间多次请求同一页数据。
• 滚动位置校准：向上滚动添加数据后，必须手动调整滚动条位置，否则新数据会把原有内容顶下去，导致滚动位置跳变。
• 数据范围判断优化：如果你的数据有唯一标识（如ID），可以通过监听可见行的第一个数据ID，来判断是否需要加载上一页，比单纯的滚动距离判断更精准。

关于修改原生ajax模块的建议 #

不建议直接修改Tabulator的原生ajax模块——这会导致后续版本升级困难，且需要深入理解Tabulator的内部数据管理逻辑。通过外部滚动监听+手动控制数据的方式，属于非侵入式扩展，更易维护且兼容性更好。

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