class Pagination { constructor(options) { this.currentPage = options.currentPage || 1; this.totalPages = options.totalPages || 1; this.onPageChange = options.onPageChange || (() => {}); this.container = options.container; this.maxVisiblePages = 5; this.init(); } init() { this.render(); this.bindEvents(); } render() { const pagination = document.createElement('div'); pagination.className = 'pagination'; // 上一页按钮 const prevButton = document.createElement('button'); prevButton.className = 'page-btn'; prevButton.textContent = '《'; prevButton.disabled = this.currentPage === 1; pagination.appendChild(prevButton); // 页码容器 const pageNumbers = document.createElement('div'); pageNumbers.className = 'page-numbers'; // 生成页码 const pages = this.generatePageNumbers(); pages.forEach(page => { if (page === '...') { const ellipsis = document.createElement('span'); ellipsis.className = 'page-ellipsis'; ellipsis.textContent = '...'; pageNumbers.appendChild(ellipsis); } else { const pageNumber = document.createElement('button'); pageNumber.className = 'page-number'; if (page === this.currentPage) { pageNumber.classList.add('active'); } pageNumber.textContent = page; pageNumber.dataset.page = page; pageNumbers.appendChild(pageNumber); } }); pagination.appendChild(pageNumbers); // 下一页按钮 const nextButton = document.createElement('button'); nextButton.className = 'page-btn'; nextButton.textContent = '》'; nextButton.disabled = this.currentPage === this.totalPages; pagination.appendChild(nextButton); // 清空容器并添加新的分页 this.container.innerHTML = ''; this.container.appendChild(pagination); } generatePageNumbers() { const pages = []; const maxVisiblePages = this.maxVisiblePages; if (this.totalPages <= maxVisiblePages) { // 如果总页数小于等于最大可见页数,显示所有页码 for (let i = 1; i <= this.totalPages; i++) { pages.push(i); } } else { // 始终显示第一页 pages.push(1); // 计算当前页附近的页码 let startPage = Math.max(2, this.currentPage - 1); let endPage = Math.min(this.totalPages - 1, this.currentPage + 1); // 调整起始和结束页码,确保显示足够的页码 if (startPage > 2) { pages.push('...'); } for (let i = startPage; i <= endPage; i++) { pages.push(i); } // 如果最后一页不在可见范围内,添加省略号 if (endPage < this.totalPages - 1) { pages.push('...'); } // 始终显示最后一页 pages.push(this.totalPages); } return pages; } bindEvents() { this.container.addEventListener('click', (e) => { const target = e.target; if (target.classList.contains('page-number')) { const page = parseInt(target.dataset.page); this.goToPage(page); } else if (target.classList.contains('page-btn')) { if (target.textContent === '《') { this.goToPage(this.currentPage - 1); } else if (target.textContent === '》') { this.goToPage(this.currentPage + 1); } } }); } goToPage(page) { if (page < 1 || page > this.totalPages || page === this.currentPage) { return; } this.currentPage = page; this.render(); this.onPageChange(page); } updateTotalPages(totalPages) { this.totalPages = totalPages; if (this.currentPage > totalPages) { this.currentPage = totalPages; } this.render(); } } // 使用示例: /* const pagination = new Pagination({ container: document.querySelector('.pagination-container'), currentPage: 1, totalPages: 10, onPageChange: (page) => { console.log('当前页:', page); // 在这里处理页面切换逻辑 } }); */