js 给表格分页

<table id="dataTable">
  <!-- 表格列定义 -->
</table>
<div id="pagination">
  <button id="prevPage">上一页</button>
  <span id="currentPage">1</span>/<span id="totalPages">10</span>
  <button id="nextPage">下一页</button>
</div>

const data = [/* 数据数组 */]; // 假设这是从后端获取的数据
const itemsPerPage = 10; // 每页显示的数据条数
let currentPage = 1; // 当前页码

function renderTable(page) {
  const start = (page - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageData = data.slice(start, end); // 获取当前页的数据

  // 渲染表格数据
  const table = document.getElementById('dataTable');
  table.innerHTML = ''; // 清空表格
  pageData.forEach(item => {
    // 根据数据生成表格行并添加到表格中
    // ...
  });
}

function updatePagination() {
  document.getElementById('currentPage').textContent = currentPage;
  document.getElementById('totalPages').textContent = Math.ceil(data.length / itemsPerPage);
}

document.getElementById('prevPage').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    renderTable(currentPage);
    updatePagination();
  }
});

document.getElementById('nextPage').addEventListener('click', () => {
  if (currentPage < Math.ceil(data.length / itemsPerPage)) {
    currentPage++;
    renderTable(currentPage);
    updatePagination();
  }
});

// 初始化表格和分页
renderTable(currentPage);
updatePagination();