如何使用JavaScript实现分页功能？

使用JavaScript实现分页功能

分页功能是网站中常见的一个功能，它可以将大量的数据分成若干个页面，便于用户查看和操作。下面介绍一种使用JavaScript实现分页功能的方法。

步骤

1. 获取数据

const data = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' },
  { id: 5, name: '钱七' },
  { id: 6, name: '孙八' },
  { id: 7, name: '周九' },
  { id: 8, name: '吴十' },
  { id: 9, name: '郑十一' },
  { id: 10, name: '冯十二' }
];

假设我们有一个数组data，里面存放了一些数据。

2. 设置每页显示的数量和当前页码

const pageSize = 3; // 每页显示的数量
let currentPage = 1; // 当前页码

我们可以设置每页显示的数量和当前页码，这里设置每页显示3条数据，初始页码为1。

3. 计算总页数

const totalPage = Math.ceil(data.length / pageSize); // 总页数

通过数据的数量和每页显示的数量计算总页数。

4. 显示当前页的数据

function showData(currentPage) {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const currentData = data.slice(start, end);
  console.log(currentData);
}

根据当前页码，计算出当前页的数据，并进行展示。

5. 显示分页按钮

function showPageBtn() {
  let str = '';
  for (let i = 1; i <= totalPage; i++) {
    if (i === currentPage) {
      str += '<span class="active">' + i + '</span>';
    } else {
      str += '<span onclick="changePage(' + i + ')">' + i + '</span>';
    }
  }
  console.log(str);
}

根据总页数，生成相应的分页按钮，并根据当前页码设置相应的样式。

6. 点击分页按钮切换页面

function changePage(page) {
  currentPage = page;
  showData(currentPage);
  showPageBtn();
}

给分页按钮绑定点击事件，点击后切换当前页码，并重新展示数据和分页按钮。

7. 初始化展示

showData(currentPage);
showPageBtn();

最后，调用showData和showPageBtn函数，进行初始化展示。

完整代码

const data = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵六' },
  { id: 5, name: '钱七' },
  { id: 6, name: '孙八' },
  { id: 7, name: '周九' },
  { id: 8, name: '吴十' },
  { id: 9, name: '郑十一' },
  { id: 10, name: '冯十二' }
];

const pageSize = 3;
let currentPage = 1;
const totalPage = Math.ceil(data.length / pageSize);

function showData(currentPage) {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  const currentData = data.slice(start, end);
  console.log(currentData);
}

function showPageBtn() {
  let str = '';
  for (let i = 1; i <= totalPage; i++) {
    if (i === currentPage) {
      str += '<span class="active">' + i + '</span>';
    } else {
      str += '<span onclick="changePage(' + i + ')">' + i + '</span>';
    }
  }
  console.log(str);
}

function changePage(page) {
  currentPage = page;
  showData(currentPage);
  showPageBtn();
}

showData(currentPage);
showPageBtn();