如何为API动态生成的表格实现JavaScript分页功能

核心思路 #

1. 设定每页显示的数据条数，计算总页数
2. 编写渲染函数，根据当前页码渲染对应范围的数据
3. 生成分页控制按钮，点击按钮切换页码并重新渲染表格

完整实现代码 #

// 全局变量存储数据、当前页码、每页条数
let allData = [];
let currentPage = 1;
const rowsPerPage = 10; // 可根据需求调整每页条数

fetch("https://raw.githubusercontent.com/Rajavasanthan/jsondata/master/pagenation.json")
.then((data) => data.json())
.then((data) => {
  allData = data;
  renderTable();
  renderPagination();
});

// 渲染当前页表格数据
function renderTable() {
  const startIndex = (currentPage - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const currentPageData = allData.slice(startIndex, endIndex);

  let tableHtml = '<tbody>';
  currentPageData.forEach(item => {
    tableHtml += `<tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.email}</td>
    </tr>`;
  });
  tableHtml += '</tbody>';
  document.getElementById('tableData').innerHTML = tableHtml;
}

// 渲染分页按钮
function renderPagination() {
  const totalPages = Math.ceil(allData.length / rowsPerPage);
  const paginationContainer = document.createElement('div');
  paginationContainer.style.marginTop = '10px';
  paginationContainer.style.display = 'flex';
  paginationContainer.style.gap = '5px';

  // 上一页按钮
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '上一页';
  prevBtn.disabled = currentPage === 1;
  prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
      currentPage--;
      renderTable();
      renderPagination();
    }
  });
  paginationContainer.appendChild(prevBtn);

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    pageBtn.style.backgroundColor = currentPage === i ? '#007bff' : 'white';
    pageBtn.style.color = currentPage === i ? 'white' : 'black';
    pageBtn.addEventListener('click', () => {
      currentPage = i;
      renderTable();
      renderPagination();
    });
    paginationContainer.appendChild(pageBtn);
  }

  // 下一页按钮
  const nextBtn = document.createElement('button');
  nextBtn.textContent = '下一页';
  nextBtn.disabled = currentPage === totalPages;
  nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages) {
      currentPage++;
      renderTable();
      renderPagination();
    }
  });
  paginationContainer.appendChild(nextBtn);

  // 替换旧的分页控件
  const oldPagination = document.getElementById('pagination');
  if (oldPagination) {
    oldPagination.remove();
  }
  paginationContainer.id = 'pagination';
  document.body.appendChild(paginationContainer);
}

关键说明 #

• 数据分片：使用slice()方法根据当前页码截取对应范围的数据，避免一次性渲染全部100条
• 分页状态管理：通过全局变量currentPage跟踪当前页码，切换时重新渲染表格和分页按钮
• 按钮状态控制：上一页/下一页按钮在边界页码时禁用，当前页码按钮高亮显示
• 动态生成分页控件：每次切换页码时重新生成分页按钮，确保状态正确

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