Oracle JET的oj-table滚动到底部时能否触发fetch调用？

当然可以实现滚动到底部触发fetch调用，核心思路是监听表格滚动事件，判断滚动位置后调用Paging Data Provider的加载方法，借助底层Collection Data Provider自动发起请求。具体步骤如下：

1. 监听表格滚动事件 #

给oj-table绑定scroll事件，通过计算滚动位置判断是否到达底部（可设置小阈值避免因滚动精度问题重复触发）。

2. 触发分页数据加载 #

当检测到滚动到底部时，先通过Paging Data Provider的hasMore()方法确认还有数据可加载，再调用fetchMore()方法——这个方法会自动触发底层Collection Data Provider的fetch逻辑，获取下一页数据并更新表格。

代码示例 #

HTML部分

<oj-table id="myTable" data="{{pagingDataProvider}}"></oj-table>

JavaScript部分

// 获取表格实例
const tableEl = document.getElementById('myTable');

// 绑定滚动事件
tableEl.addEventListener('scroll', () => {
  const { scrollTop, clientHeight, scrollHeight } = tableEl;
  // 设置10px阈值，避免滚动时因像素精度问题重复触发
  const isNearBottom = scrollTop + clientHeight >= scrollHeight - 10;

  if (isNearBottom) {
    // 检查是否还有未加载的数据
    if (pagingDataProvider.hasMore()) {
      // 触发加载更多，fetch请求由Collection Data Provider自动处理
      pagingDataProvider.fetchMore()
        .then(() => {
          // 可选：加载完成后的回调，比如隐藏加载提示
          console.log('更多数据加载完成');
        })
        .catch(error => {
          // 错误处理，比如提示用户加载失败
          console.error('加载更多数据失败:', error);
        });
    }
  }
});

注意事项 #

• 确保Paging Data Provider已正确配置pageSize等分页参数，这样fetchMore()会按预设的每页数量请求下一页数据。
• 如果你的Collection Data Provider使用自定义fetch逻辑，需确保它能正确识别分页参数（如offset、pageNumber），并返回对应页的数据。
• 建议添加加载状态提示（比如在表格底部显示"加载中..."），提升用户体验，同时避免短时间内重复触发加载请求。

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