如何为AJAX数据表格设置每页10条数据的显示长度？

要给你的表格加上每页10条的分页功能，需要添加分页状态管理、数据截取和分页控件渲染这几个部分，以下是修改后的完整代码和关键说明：

核心实现逻辑 #

• 用currentPage（当前页码，默认1）和itemsPerPage（每页条数，设为10）管理分页状态
• 根据总数据量计算总页数，生成分页切换按钮
• 从原始数据中截取当前页的片段，只渲染这部分内容
• 给分页按钮绑定切换事件，点击后更新页码并重新渲染表格

修改后的完整代码 #

// 分页核心变量
let currentPage = 1;
const itemsPerPage = 10;

// 渲染表格数据的核心函数
function renderTable(data) {
  let html = '';
  // 计算当前页数据的起始/结束索引
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const currentPageData = data.slice(startIndex, endIndex);

  if (currentPageData.length > 0) {
    // 序号从当前页起始位置开始，避免每页都从1计数
    let serial_no = startIndex + 1;
    for (let count = 0; count < currentPageData.length; count++) {
      html += '<tr>';
      html += '<td>' + serial_no + '</td>';
      html += '<td>' + currentPageData[count].id + '</td>';
      html += '<td>€' + currentPageData[count].inkoopprijs + '</td>';
      html += '<td>€' + currentPageData[count].verkoopprijs + '</td>';
      html += '<td>' + currentPageData[count].producten + '</td>';
      // 修复原代码未闭合的a标签
      html += '<td><a href="../prijswijzigen.php?edit=' + currentPageData[count].id + '" class="edit_btn">Edit</a></td>';
      html += '<td><a href="C_R_U_D.php?del=' + currentPageData[count].id + '" class="del_btn">Delete</a></td>';
      html += '</tr>';
      serial_no++;
    }
  } else {
    // 修正colspan数值，匹配表格实际列数（6列）
    html += '<tr><td colspan="6" class="text-center">No Data Found</td></tr>';
  }
  document.getElementById('post_data').innerHTML = html;
  document.getElementById('total_data').innerHTML = data.length;
  // 生成分页控件
  renderPagination(data.length);
}

// 渲染分页按钮
function renderPagination(totalItems) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  let paginationHtml = '<div class="pagination">';
  
  // 上一页按钮
  paginationHtml += `<button ${currentPage === 1 ? 'disabled' : ''} onclick="changePage(${currentPage - 1})">上一页</button>`;
  
  // 页码按钮组
  for (let i = 1; i <= totalPages; i++) {
    paginationHtml += `<button ${currentPage === i ? 'class="active"' : ''} onclick="changePage(${i})">${i}</button>`;
  }
  
  // 下一页按钮
  paginationHtml += `<button ${currentPage === totalPages ? 'disabled' : ''} onclick="changePage(${currentPage + 1})">下一页</button>`;
  
  paginationHtml += '</div>';
  document.getElementById('pagination_container').innerHTML = paginationHtml;
}

// 切换页码的触发函数
function changePage(pageNum) {
  currentPage = pageNum;
  // 传入原始数据重新渲染，建议把response存为全局变量或传入参数
  renderTable(response);
}

// 初始化渲染表格（假设已获取到response数据）
renderTable(response);

额外注意事项 #

• 页面需要添加分页容器：在表格下方插入<div id="pagination_container"></div>，用于承载分页按钮
• 如果有搜索功能，每次搜索后要重置currentPage = 1，再调用renderTable渲染搜索结果
• 原代码存在HTML标签未闭合、列数不匹配的小问题，已在修改后的代码中修正

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