不使用Bootstrap如何为React项目中的HTML表格实现分页功能

实现方案 #

你可以完全基于原生React实现该分页需求，无需引入额外组件库，修改逻辑如下：

核心逻辑

1. 新增分页状态管理：记录当前页码、固定每页展示10条数据
2. 对原始Tokens数组按页码做切片，仅渲染当前页对应的数据段
3. 表格底部新增分页控件，仅当总数据量超过10条时展示，支持切换操作

完整修改后代码

import { useState } from 'react'

// 你的原有组件逻辑
function YourComponent() {
  // 假设你的Tokens数据是从接口/state获取，这里保留原有逻辑
  const [Tokens, setTokens] = useState([])
  // 新增分页状态
  const [currentPage, setCurrentPage] = useState(1)
  const pageSize = 10 // 每页固定展示10条

  // 计算总页数
  const totalPage = Math.ceil(Tokens.length / pageSize)
  // 切片得到当前页要渲染的数据
  const currentPageData = Tokens.slice((currentPage - 1) * pageSize, currentPage * pageSize)

  // 分页切换方法
  const handlePageChange = (targetPage) => {
    if (targetPage < 1 || targetPage > totalPage) return
    setCurrentPage(targetPage)
    // 可选优化：切换页码后自动滚动到表格顶部
    // document.querySelector('.app-container table').scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <div className="app-container">
      <table>
        <thead>
          <tr>
            <th>Loan ID</th>
            <th>Owner</th>
            <th>Amount (R)</th>
            <th>Rate (%)</th>
            <th>Term (Months)</th>
            <th>Start Date</th>
            <th>End Date</th>
          </tr>
        </thead>
        <tbody>
          {/* 改为遍历当前页的切片数据，而非全量Tokens */}
          {currentPageData.map((token, index) => (
            <tr key={index /* 建议替换为token里的唯一值比如loan id，避免渲染异常 */}>
              <td>{token[0]}</td>
              <td>{token[1]}</td>
              <td>{token[2]}</td>
              <td>{token[3]}</td>
              <td>{token[4]}</td>
              <td>{token[5]}</td>
              <td>{token[6]}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 仅当总页数大于1时展示分页控件 */}
      {totalPage > 1 && (
        <div className="pagination-wrap" style={{ marginTop: '12px', display: 'flex', gap: '8px', alignItems: 'center' }}>
          <button 
            onClick={() => handlePageChange(currentPage - 1)} 
            disabled={currentPage === 1}
            style={{ padding: '4px 8px', cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}
          >
            上一页
          </button>

          <span>第 {currentPage} 页 / 共 {totalPage} 页</span>

          <button 
            onClick={() => handlePageChange(currentPage + 1)} 
            disabled={currentPage === totalPage}
            style={{ padding: '4px 8px', cursor: currentPage === totalPage ? 'not-allowed' : 'pointer' }}
          >
            下一页
          </button>
        </div>
      )}
    </div>
  )
}

可选优化点

• 新增数据后如果需要自动跳转到最后一页展示新数据，可以在你原有新增数据的逻辑末尾，调用setCurrentPage(Math.ceil((Tokens.length + 1)/10))即可
• 可以扩展页码按钮组，展示所有可点击的页码，给当前激活的页码加高亮样式
• 可以自行修改pagination-wrap的CSS样式，匹配你现有表格的设计风格

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