React实现点击分页按钮触发Django REST API分页数据请求

看起来你已经把基础框架搭得差不多了，接下来咱们一步步搞定这两个分页功能：

1. 先把复用的updateData方法抽出来 #

你之前在onGridReady里定义的updateData函数，最好改成组件的类方法，这样分页跳转时能直接复用，不用重复写逻辑：

// 把这个方法移到组件顶层，和onGridReady同级
updateData = (data) => {
  this.setState({
    rowData: data['results'],
    dataLength: data['totalDataOnPage'],
    totalData: data['totalData'],
    currentPage: data['currentPage'],
    totalPages: data['totalPages'],
    nextLink: data['nextPage'],
    previousLink: data['previousPage'],
    // 顺便生成页码列表：从1到总页数的数组
    pageNumberList: Array.from({ length: data['totalPages'] }, (_, i) => i + 1)
  }, () => {
    // setState是异步操作，在回调里更新ag-Grid的数据源
    const Server = createServer(this.state.rowData);
    const datasource = createServerSideDatasource(Server);
    this.gridApi.setServerSideDatasource(datasource);
  });
};

然后修改onGridReady里的调用：

onGridReady = params => {
  this.gridApi = params.api;
  fetch(`http://localhost:8000/cluster/${this.state.id}/tasks`, options)
    .then(res => res.json())
    .then(data => this.updateData(data))
    .catch(err => console.error('加载初始数据失败:', err));
};

2. 实现「下一页」按钮功能 #

你的state已经存储了后端返回的nextLink，直接用这个链接发起请求就好，不用手动拼page参数，兼容性更强：

onBtNext = () => {
  // 先判断是否存在下一页，避免无效请求
  if (!this.state.nextLink) return;

  fetch(this.state.nextLink, options)
    .then(res => res.json())
    .then(data => this.updateData(data))
    .catch(err => console.error('加载下一页失败:', err));
};

3. 实现「指定页码跳转」功能 #

首先要给页码按钮传递当前点击的页码值，然后拼URL发起请求：

第一步：修改页码组件的点击事件 #

<Page 
  onClick={() => this.gotoPage(PageNumber)} {/* 把当前页码传进去 */}
  key={PageNumber} 
  value={PageNumber} 
  className={PageNumber === this.state.currentPage ? 'linkactive' : ''}
>
  {PageNumber}
</Page>

第二步：实现gotoPage方法 #

gotoPage = (pageNumber) => {
  // 先校验页码合法性，避免超出范围的请求
  if (pageNumber < 1 || pageNumber > this.state.totalPages) return;

  const requestUrl = `http://localhost:8000/cluster/${this.state.id}/tasks?page=${pageNumber}`;
  fetch(requestUrl, options)
    .then(res => res.json())
    .then(data => this.updateData(data))
    .catch(err => console.error(`加载第${pageNumber}页失败:`, err));
};

可选：补充「上一页」按钮功能 #

和下一页逻辑类似，用后端返回的previousLink就行：

onBtPrevious = () => {
  if (!this.state.previousLink) return;

  fetch(this.state.previousLink, options)
    .then(res => res.json())
    .then(data => this.updateData(data))
    .catch(err => console.error('加载上一页失败:', err));
};

小提示 #

• 可以在state里加个isLoading状态，点击分页按钮时设为true，请求完成后设为false，给用户加载反馈；
• 如果你不需要ag-Grid的serverSide模式高级特性，改用clientSide模式会更简单，直接更新rowData即可，不用手动设置数据源。

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