JavaScript分页查询：让你的列表功能轻松上手

2024-01-19 19:46:38

前端开发中的分页查询：轻松掌握一招鲜

作为前端开发者，分页查询是一个经常遇到的需求。无论是在显示大量数据列表时将其分成多页，还是提供一个查询功能让用户筛选数据，分页都必不可少。

什么是分页查询？

分页查询就是将大量数据分割成更小的、易于管理的块，称为页面。它可以提高用户体验，使数据展示更清晰，加载时间更快，操作更流畅。

JavaScript 中的分页查询

JavaScript 提供了灵活、强大的工具，可用于实现分页查询。下面是一个示例，演示如何使用 JavaScript 进行基本分页：

const data = [
  { name: 'John', age: 20 },
  { name: 'Mary', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 35 },
  { name: 'Tom', age: 40 }
];

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

const list = document.getElementById('list');
const pagination = document.getElementById('pagination');

const renderData = () => {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const pageData = data.slice(startIndex, endIndex);

  list.innerHTML = '';
  for (const item of pageData) {
    const li = document.createElement('li');
    li.innerHTML = `${item.name} - ${item.age}`;
    list.appendChild(li);
  }
};

const renderPagination = () => {
  pagination.innerHTML = '';
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.innerHTML = i;
    button.onclick = () => {
      currentPage = i;
      renderData();
    };
    pagination.appendChild(button);
  }
};

renderData();
renderPagination();