dashboard/js/pagination.js

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);
        // 在这里处理页面切换逻辑
    }
});
*/