如何获取TantStack Table当前页码与总页数并在分页按钮间展示

你可以直接从表格实例的state中获取当前页码，结合getPageCount()方法拿到的总页数，将分页信息插入到两个按钮之间即可，具体实现如下：

修改后的代码 #

<Button
  variant="outline"
  size="sm"
  onClick={() => table.previousPage()}
  disabled={!table.getCanPreviousPage()}
>
  Previous
</Button>
{/* 插入分页信息 */}
<span style={{ margin: '0 12px', display: 'inline-block', lineHeight: '28px' }}>
  第{table.state.pageIndex + 1}页/共{table.getPageCount()}页
</span>
<Button
  variant="outline"
  size="sm"
  onClick={() => table.nextPage()}
  disabled={!table.getCanNextPage()}
>
  Next
</Button>

核心要点 #

• 当前页码：TantStack React Table的pageIndex从0开始计数，所以需要加1转换为直观的页码，通过table.state.pageIndex获取
• 总页数：调用表格实例的getPageCount()方法直接获取总页数
• 样式可根据项目需求调整，比如替换行内样式为自定义CSS类，保证和按钮布局对齐

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