Oracle-JET：如何捕获oj-paging-control页码变化并动态加载列表数据

当然可以捕获oj-paging-control的页码变化，核心是利用组件的page-changed事件，下面是具体实现方案：

步骤1：给分页控件绑定页码变化事件 #

修改你的HTML代码，给<oj-paging-control>添加on-page-changed属性，绑定自定义的事件处理函数：

<oj-paging-control id="paging" data='[[pagingDataProvider]]' page-size='100' on-page-changed="[[handlePageChange]]"></oj-paging-control>
<oj-list-view id="listview" data="[[pagingDataProvider]]">
     <template slot="itemTemplate" data-oj-as="item">
     <oj-list-item-layout id="listitem">
     <oj-bind-text value="[[item.data.VALUE]]"></oj-bind-text>
     </oj-list-item-layout>
     </template>
</oj-list-view>

步骤2：实现事件处理函数与数据加载逻辑 #

在你的JS代码中，添加handlePageChange函数处理页码变化，同时优化初始数据加载逻辑：

// 初始化加载第一页数据
this.loadPageData(1);

// 页码变化处理函数
handlePageChange = (event) => {
  const currentPage = event.detail['page'];
  // 调用API加载对应页码的数据
  this.loadPageData(currentPage);
};

// 通用数据加载函数
loadPageData = (pageNum) => {
  // 计算当前页的数据范围（按每页100条）
  const start = (pageNum - 1) * 100 + 1;
  const end = pageNum * 100;
  
  // 构造请求参数，传递数据范围或页码
  const reqParams = {
    // 补充你的基础请求参数
    start: start,
    end: end
  };

  makeAjaxCall(url, Object.assign({}, reqParams, { dataType: "json" }))
    .then((response) => {
      const data = response.split("\n");
      this.listOutput = []; // 清空旧数据
      for (let i = 0; i < data.length; i++) {
        if (data[i].trim() !== "") {
          this.listOutput.push({
            "VALUE": data[i]
          });
        }
      }
      // 更新分页数据提供者
      this.pagingDataProvider = new ArrayDataProvider(this.listOutput, { keyAttributes: 'VALUE' });
    })
    .catch((error) => {
      // 处理请求错误
      console.error('加载数据失败:', error);
    });
};

关键说明 #

• page-changed事件的event.detail对象中包含当前页码page属性，直接获取即可
• loadPageData函数封装了通用API调用逻辑，每次加载新页时先清空旧数据再填充新数据
• 初始页面加载时主动调用loadPageData(1)获取第一页数据
• 修正了原代码的两处问题：while循环未初始化i变量，以及频繁创建ArrayDataProvider的冗余操作（改为数据处理完成后一次性更新）

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