JavaScript 分页

在前端开发中，我们常常需要使用分页功能来展示大量的数据。本文将介绍如何使用 JavaScript 实现分页功能。

实现分页的基本思路

分页的基本思路是将服务器返回的所有数据按照每一页所需的数量进行等分，通过 Ajax 的方式请求每一页的数据，然后将数据渲染到页面上。

实现步骤

步骤一：计算总页数和总数据量

在服务器返回数据时，我们需要先计算出总数据量和总页数。计算总页数的代码如下：

// 假设一页显示 10 条数据
const pageSize = 10

// 获取总数据条数
const totalCount = 100

// 计算总页数
const pageCount = Math.ceil(totalCount / pageSize)

步骤二：获取当前页数据

通过 Ajax 请求获取当前页所需的数据，请求的代码如下：

// 获取第一页数据
fetch('/api/data?page=1').then(response => response.json()).then(data => {
  // 将数据渲染到页面上
})

步骤三：渲染分页按钮

根据总页数渲染分页按钮，代码如下：

// 渲染分页按钮
for (let i = 1; i <= pageCount; i++) {
  const button = document.createElement('button')
  button.innerText = i
  button.addEventListener('click', () => {
    // 点击分页按钮请求对应页码的数据
    fetch(`/api/data?page=${i}`).then(response => response.json()).then(data => {
      // 将数据渲染到页面上
    })
  })
  document.body.appendChild(button)
}

以上代码中，我们利用 for 循环创建了每一页的按钮，并给按钮添加了点击事件。点击按钮后，发送相应的请求，获取对应页码的数据。

参考资料

• Creating A Simple Pagination Using JavaScript