js表格分页实现代码

下面我将为你详细讲解“JS表格分页实现代码”的完整攻略，包含以下几个部分：

1. 准备工作
2. 实现分页逻辑
3. 示例说明

1. 准备工作

在开始编写代码之前，我们需要先准备好需要用到的HTML、CSS和JS文件，并进行引入。HTML文件中需要包含需要分页的表格，CSS文件中需要设定表格样式，JS文件中需要实现分页逻辑。

HTML部分代码：

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!--表格数据-->
  </tbody>
</table>

<div id="pagination"></div> <!--分页栏-->

CSS部分代码：

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 20px;
}

.table thead th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.table tbody td {
  border: 1px solid #ddd;
  padding: 10px;
}

#pagination {
  margin-top: 20px;
  text-align: center;
}

JS部分代码：

const pageSize = 10; //每页显示数据数
let currentPage = 1; //当前页码
const data = []; //表格数据

//请求表格数据
function getData() {
  //请求数据的方法
}

//渲染表格数据
function renderTable() {
  //渲染表格数据的方法
}

//更新分页栏
function updatePagination() {
  //更新分页栏的方法
}

//初始化表格
function initTable() {
  getData(); //请求表格数据
  renderTable(); //渲染表格数据
  updatePagination(); //更新分页栏
}

initTable(); //初始化表格

2. 实现分页逻辑

在HTML、CSS和JS文件准备就绪之后，我们需要开始实现分页逻辑。分页逻辑的实现需要包括以下几个步骤：

1. 根据当前页码和每页显示数据数计算出需要显示的数据的起始索引和结束索引。
2. 根据起始索引和结束索引渲染表格数据。
3. 根据当前页码和数据总数渲染分页栏。

完整的分页逻辑代码如下：

//计算起始索引和结束索引
function getStartAndEnd() {
  const start = (currentPage - 1) * pageSize; //起始索引
  const end = start + pageSize; //结束索引
  return { start, end };
}

//渲染表格数据
function renderTable() {
  const { start, end } = getStartAndEnd(); //获取起始索引和结束索引
  const tbody = document.querySelector(".table tbody");
  let html = "";
  for (let i = start; i < end && i < data.length; i++) {
    html += `<tr>
            <td>${data[i].id}</td>
            <td>${data[i].name}</td>
            <td>${data[i].age}</td>
        </tr>`;
  }
  tbody.innerHTML = html;
}

//渲染分页栏
function renderPagination() {
  const totalPages = Math.ceil(data.length / pageSize); //总页数
  let html = "";
  for (let i = 1; i <= totalPages; i++) {
    const activeClass = i === currentPage ? "active" : ""; //当前页添加active类名
    html += `<span class="page ${activeClass}">${i}</span>`;
  }
  const pagination = document.querySelector("#pagination");
  pagination.innerHTML = html;
}

//更新分页栏
function updatePagination() {
  renderPagination(); //渲染分页栏
  const pages = document.querySelectorAll(".page");
  pages.forEach((page) => {
    page.addEventListener("click", () => {
      currentPage = parseInt(page.innerHTML);
      renderTable(); //渲染表格数据
      updatePagination(); //更新分页栏
    });
  });
}

//初始化表格
function initTable() {
  getData(); //请求表格数据
  renderTable(); //渲染表格数据
  updatePagination(); //更新分页栏
}

3. 示例说明

下面我会用两个实际的示例来演示如何使用以上代码实现表格分页。

示例一

为了方便，我们可以在JS文件中手动定义表格数据，例如下面的代码：

const data = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 20 },
  { id: 3, name: "王五", age: 22 },
  //...更多数据
];

然后在请求到数据之后，调用initTable()方法即可实现表格分页的效果。

示例二

如果需要从后端动态获取数据，可以按照以下的方式实现：

//请求表格数据
function getData() {
  fetch("/getTableData")
    .then((res) => res.json())
    .then((res) => {
      data = res; //存储表格数据
      initTable(); //初始化表格
    })
    .catch((err) => console.error(err));
}

其中/getTableData是后端接口的地址，返回格式为JSON格式的表格数据。这个接口需要后端开发人员自行编写。

综上所述，以上就是JS表格分页实现代码的完整攻略，希望对你有所帮助！

阅读剩余 75%