js实现分页效果

// 假设我们有一个数据数组
let data = [...]; // 数据集合
const itemsPerPage = 10; // 每页显示10条数据
let currentPage = 1; // 当前页码

// 计算总页数
const totalPages = Math.ceil(data.length / itemsPerPage);

// 获取当前页的数据
function getCurrentPageData() {
  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return data.slice(start, end);
}

// 渲染当前页的数据到页面上
function renderPage(dataToRender) {
  // 这里假设有一个id为'data-list'的元素用来展示数据
  const dataList = document.getElementById('data-list');
  dataList.innerHTML = ''; // 清空之前的数据
  dataToRender.forEach(item => {
    const div = document.createElement('div');
    div.textContent = item; // 假设item是要展示的数据
    dataList.appendChild(div);
  });
}

// 创建分页导航
function createPagination() {
  const pagination = document.getElementById('pagination');
  for (let i = 1; i <= totalPages; i++) {
    const button = document.createElement('button');
    button.textContent = i;
    button.addEventListener('click', () => {
      currentPage = i;
      renderPage(getCurrentPageData());
    });
    pagination.appendChild(button);
  }
}

// 初始化页面
renderPage(getCurrentPageData());
createPagination();