如何在React中使用TanStack Table实现< 1 2 3 … 8 9 10 >式页码列表？

1. 基础准备 #

首先确保你的React项目中已安装TanStack Table（以v8版本为例），并在表格配置中启用分页插件：

import { useTable, usePagination } from '@tanstack/react-table';

function MyTable({ data, columns }) {
  const table = useTable({
    data,
    columns,
    initialState: { pagination: { pageIndex: 0, pageSize: 10 } }, // 初始页码与每页条数
  }, usePagination);

  // 后续分页逻辑写在这里
}

2. 实现页码生成逻辑 #

编写工具函数，根据当前页码和总页数生成带省略号的页码列表。注意TanStack Table的pageIndex从0开始，需转换为1-based页码处理：

const generatePageNumbers = (currentPage, pageCount) => {
  const pages = [];
  // 总页数≤7时，直接显示所有页码
  if (pageCount <= 7) {
    for (let i = 1; i <= pageCount; i++) {
      pages.push(i);
    }
    return pages;
  }

  // 当前页码在前3位
  if (currentPage <= 3) {
    return [1, 2, 3, '...', pageCount - 1, pageCount];
  }

  // 当前页码在后3位
  if (currentPage >= pageCount - 2) {
    return [1, 2, '...', pageCount - 2, pageCount - 1, pageCount];
  }

  // 当前页码在中间位置
  return [1, '...', currentPage - 1, currentPage, currentPage + 1, '...', pageCount];
};

3. 渲染分页控件 #

基于生成的页码列表，渲染包含上一页、页码、省略号、下一页的分页组件：

const Pagination = ({ table }) => {
  const {
    getCanPreviousPage,
    getCanNextPage,
    pageIndex,
    pageCount,
    goToPage,
  } = table.getPaginationRowModel();

  const currentPage = pageIndex + 1; // 转换为1-based页码
  const pageNumbers = generatePageNumbers(currentPage, pageCount);

  return (
    <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '16px' }}>
      {/* 上一页按钮 */}
      <button
        onClick={() => goToPage(pageIndex - 1)}
        disabled={!getCanPreviousPage()}
        style={{ padding: '4px 8px', cursor: 'pointer' }}
      >
        &lt;
      </button>

      {/* 页码列表 */}
      {pageNumbers.map((page, idx) => (
        <span key={idx} style={{ padding: '4px 8px' }}>
          {page === '...' ? (
            <span style={{ color: '#999' }}>...</span>
          ) : (
            <button
              onClick={() => goToPage(page - 1)} // 转回0-based索引
              style={{
                border: 'none',
                background: currentPage === page ? '#007bff' : 'transparent',
                color: currentPage === page ? '#fff' : '#000',
                padding: '4px 8px',
                borderRadius: '4px',
                cursor: 'pointer',
              }}
            >
              {page}
            </button>
          )}
        </span>
      ))}

      {/* 下一页按钮 */}
      <button
        onClick={() => goToPage(pageIndex + 1)}
        disabled={!getCanNextPage()}
        style={{ padding: '4px 8px', cursor: 'pointer' }}
      >
        &gt;
      </button>
    </div>
  );
};

4. 在表格中使用分页组件 #

将分页组件放置在表格下方即可：

function MyTable({ data, columns }) {
  // ... 之前的table配置

  return (
    <div>
      {/* 表格内容渲染 */}
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(column => (
                <th key={column.id}>{column.renderHeader()}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>{cell.renderCell()}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* 分页组件 */}
      <Pagination table={table} />
    </div>
  );
}

关键细节说明 #

• 注意pageIndex与1-based页码的转换，避免跳转错误
• 通过getCanPreviousPage和getCanNextPage控制上/下一页按钮的禁用状态
• 当前页码通过背景色高亮区分，提升用户体验
• 省略号元素设置为不可点击，避免无效交互

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