如何在Next.js中用TanStack Table实现服务端分页并触发页面切换数据请求

核心排查点及修复方案 #

1. 确认开启手动分页模式 #

必须在创建表格实例时明确开启手动分页配置，否则表格会默认使用客户端分页逻辑：

const table = useReactTable({
  columns,
  data,
  paginationMode: 'manual',
  manualPagination: true,
  pageCount: totalPages, // 传入服务端返回的总页数
  // 其他表格配置
})

2. 监听分页状态变化触发请求 #

用useEffect监听表格的分页参数（pageIndex、pageSize），参数变化时立即发起服务端请求：

const [tableData, setTableData] = useState([])
const [totalPages, setTotalPages] = useState(0)
const table = useReactTable({/* 上述配置 */})

// 监听分页状态变更，拉取对应页数据
useEffect(() => {
  const fetchPageData = async () => {
    const { pageIndex, pageSize } = table.getState().pagination
    // 注意：服务端通常页码从1开始，需转义
    const res = await fetch(`/api/your-data?page=${pageIndex + 1}&pageSize=${pageSize}`)
    const result = await res.json()
    setTableData(result.dataList)
    setTotalPages(result.totalPages)
  }
  fetchPageData()
}, [table.getState().pagination.pageIndex, table.getState().pagination.pageSize])

3. 分页按钮必须绑定表格内置方法 #

不要自行维护独立的分页状态，直接调用表格实例提供的分页控制方法，确保状态变更能被useEffect捕获：

// 分页控件示例
<div className="pagination-controls">
  <button 
    onClick={() => table.previousPage()} 
    disabled={!table.getCanPreviousPage()}
  >
    上一页
  </button>
  <span>第 {table.getState().pagination.pageIndex + 1} 页 / 共 {totalPages} 页</span>
  <button 
    onClick={() => table.nextPage()} 
    disabled={!table.getCanNextPage()}
  >
    下一页
  </button>
</div>

4. 校验服务端参数与返回值 #

• 确认前端传递的页码、每页条数和服务端接口要求一致（比如服务端是否接受从0开始的页码）
• 服务端返回的总页数totalPages必须准确，否则会导致分页按钮提前禁用，无法触发下一页请求

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