document.addEventListener('DOMContentLoaded', function() { const items = document.getElementById('items'); const pagination = document.getElementById('pagination'); const data = [/* 这里是你要分页的数据,例如一个包含多个对象的数组 */]; // 示例数据,实际应用中应从服务器获取或定义在外部文件等 const itemsPerPage = 5; // 每页显示的项目数 let currentPage = 1; // 当前页码 function displayItems(page) { const startIndex = (page - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; items.innerHTML = ''; // 清空当前显示的内容 for (let i = startIndex; i < endIndex && i < data.length; i++) { const item = document.createElement('li'); item.textContent = data[i]; // 显示数据项,根据实际情况调整显示内容(例如使用data[i].name等) items.appendChild(item); } } function displayPagination(totalPages) { pagination.innerHTML = ''; // 清空现有的分页链接 for (let i = 1; i <= totalPages; i++) { const pageItem = document.createElement('li'); pageItem.textContent = i; pageItem.onclick = function() { currentPage = i; displayItems(currentPage); // 显示当前页的数据项 displayPagination(totalPages); // 更新分页链接的激活状态 }; if (i === currentPage) { pageItem.classList.add('active'); // 为当前页码添加激活样式 } pagination.appendChild(pageItem); } } const totalPages = Math.ceil(data.length / itemsPerPage); // 计算总页数 displayItems(currentPage); // 初始化显示第一页的数据项 displayPagination(totalPages); // 初始化分页链接的显示 });