前端，js,实现表格分页

前端JavaScript实现表格分页通常会结合HTML、CSS和JavaScript库如jQuery或Vue/Angular等。基本步骤如下：

1. **创建表格结构**：使用HTML `<table>`元素创建表格，并包含数据列头和行数据。

<table id="pagination-table">
  <thead>
    <tr>
      <!-- 表头列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格行将动态添加 -->
  </tbody>
</table>

2. **数据处理**：假设你有一个包含所有数据的数组，可以使用`slice()`函数切片显示当前页的数据。

3. **添加分页功能**：在JavaScript中计算每页的条数，设置页码范围，以及提供翻页按钮。

let data = ...; // 所有数据
const perPage = 10; // 每页显示的数量
let currentPage = 1; // 初始页码

function displayData(page) {
  const startIndex = (page - 1) * perPage;
  const endIndex = startIndex + perPage;
  // 更新表格数据
  document.getElementById('pagination-table').innerHTML = renderRows(data.slice(startIndex, endIndex));
}

// 翻页事件监听器
document.getElementById('prev-button').addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    displayData(currentPage);
  }
});
document.getElementById('next-button').addEventListener('click', function() {
  currentPage++;
  displayData(currentPage);
});

displayData(currentPage); // 初始加载第一页数据

4. **渲染函数**：这通常是模板引擎的工作，比如使用handlebars、ejs或纯JavaScript模板字符串来生成HTML。

function renderRows(rows) {
  let html = '';
  rows.forEach(row => {
    html += '<tr>';
    // 渲染每一行数据
    html += '</tr>';
  });
  return html;
}