如何快速实现HTML表格翻页

纯前端分页（适合数据量小）

原理：一次性加载所有数据，通过JavaScript控制每页显示条目

<div>
  <table id="dataTable">
    <thead><tr><th>ID</th><th>姓名</th><th>年龄</th></tr></thead>
    <tbody><!-- 数据由JS填充 --></tbody>
  </table>
  <div id="pagination">
    <button onclick="changePage(-1)">上一页</button>
    <span id="pageNum">1/5</span>
    <button onclick="changePage(1)">下一页</button>
  </div>
</div>
<script>
const allData = []; // 假设已从API获取数据
let currentPage = 1;
const perPage = 10;
function renderTable() {
  const start = (currentPage-1) * perPage;
  const pageData = allData.slice(start, start + perPage);
  let html = '';
  pageData.forEach(item => {
    html += `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.age}</td></tr>`;
  });
  document.querySelector('#dataTable tbody').innerHTML = html;
  document.getElementById('pageNum').textContent = `${currentPage}/${Math.ceil(allData.length/perPage)}`;
}
function changePage(step) {
  const totalPage = Math.ceil(allData.length/perPage);
  if(currentPage + step > 0 && currentPage + step <= totalPage) {
    currentPage += step;
    renderTable();
  }
}
// 初始化
renderTable();
</script>

后端分页（适合大数据量）

原理：每次翻页时向服务器请求新数据

<!-- HTML结构同上，省略table代码 -->
<script>
async function loadPage(page) {
  const response = await fetch(`/api/data?page=${page}&size=10`);
  const { data, total } = await response.json();
  // 渲染表格数据
  let html = '';
  data.forEach(item => { /* 生成行数据 */ });
  document.querySelector('tbody').innerHTML = html;
  // 生成分页按钮
  const pageCount = Math.ceil(total/10);
  let paginationHtml = '';
  for(let i=1; i<=pageCount; i++) {
    paginationHtml += `<button class="${i===page?'active':''}" onclick="loadPage(${i})">${i}</button>`;
  }
  document.getElementById('pagination').innerHTML = paginationHtml;
}
// 初始加载第一页
loadPage(1);
</script>

后端示例（Node.js + Express）：

app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page) || 1;
  const size = parseInt(req.query.size) || 10;
  const offset = (page-1)*size;
  // 数据库查询
  db.query('SELECT * FROM users LIMIT ? OFFSET ?', [size, offset], (err, data) => {
    db.query('SELECT COUNT(*) AS total FROM users', (err, countResult) => {
      res.json({ 
        data, 
        total: countResult[0].total 
      });
    });
  });
});

使用现成库（推荐方案）

1. DataTables：

   

   <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css">
   <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
   <table id="myTable" class="display">
     <thead><tr><th>列1</th><th>列2</th></tr></thead>
   </table>
   <script>
   $(document).ready(() => {
     $('#myTable').DataTable({
       ajax: '/api/data', // 数据接口
       serverSide: true,  // 启用后端分页
       pageLength: 25     // 每页条目
     });
   });
   </script>

2. Pagination.js：
   轻量级分页库，GitHub星标超8K，支持动态数据绑定。

关键注意事项

1. 性能选择：
   • ≤500条数据：纯前端方案

   • 500条数据：后端分页

2. 用户体验优化：
   • 添加页面跳转输入框
   • 显示总页数及当前页码
   • 数据加载时添加loading动画
3. SEO友好：
   • 重要数据首次加载时直接渲染在HTML中
   • 避免完全依赖JavaScript生成内容

总结建议

引用说明：本文代码示例基于MDN Web文档标准语法，DataTables引用自datatables.net，数据库操作采用MySQL语法规范，实际开发请根据项目框架调整实现细节。