js实现页码

实现页码功能的方法

使用原生JavaScript实现分页

创建一个简单的分页组件需要计算总页数、当前页以及生成页码按钮。以下是一个基础实现示例：

function createPagination(totalItems, itemsPerPage, currentPage, containerId) {
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    // 上一页按钮
    if (currentPage > 1) {
        const prevBtn = document.createElement('button');
        prevBtn.textContent = '上一页';
        prevBtn.addEventListener('click', () => updatePage(currentPage - 1));
        container.appendChild(prevBtn);
    }

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        if (i === currentPage) {
            pageBtn.classList.add('active');
        }
        pageBtn.addEventListener('click', () => updatePage(i));
        container.appendChild(pageBtn);
    }

    // 下一页按钮
    if (currentPage < totalPages) {
        const nextBtn = document.createElement('button');
        nextBtn.textContent = '下一页';
        nextBtn.addEventListener('click', () => updatePage(currentPage + 1));
        container.appendChild(nextBtn);
    }

    function updatePage(newPage) {
        // 这里可以添加页面跳转逻辑或回调函数
        console.log('跳转到页面:', newPage);
        createPagination(totalItems, itemsPerPage, newPage, containerId);
    }
}

// 使用示例
createPagination(100, 10, 1, 'pagination-container');

使用CSS样式美化页码

为页码添加基本样式：

#pagination-container button {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}

#pagination-container button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

#pagination-container button:hover:not(.active) {
    background: #f0f0f0;
}

高级分页实现（显示部分页码）

对于大量页码，可以限制显示的页码数量：

function createAdvancedPagination(totalItems, itemsPerPage, currentPage, containerId, maxVisiblePages = 5) {
    const totalPages = Math.ceil(totalItems / itemsPerPage);
    const container = document.getElementById(containerId);
    container.innerHTML = '';

    // 计算显示的页码范围
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

    if (endPage - startPage + 1 < maxVisiblePages) {
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
    }

    // 上一页按钮
    if (currentPage > 1) {
        const prevBtn = document.createElement('button');
        prevBtn.textContent = '上一页';
        prevBtn.addEventListener('click', () => updatePage(currentPage - 1));
        container.appendChild(prevBtn);
    }

    // 第一页和省略号
    if (startPage > 1) {
        const firstBtn = document.createElement('button');
        firstBtn.textContent = '1';
        firstBtn.addEventListener('click', () => updatePage(1));
        container.appendChild(firstBtn);

        if (startPage > 2) {
            const ellipsis = document.createElement('span');
            ellipsis.textContent = '...';
            container.appendChild(ellipsis);
        }
    }

    // 页码按钮
    for (let i = startPage; i <= endPage; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.textContent = i;
        if (i === currentPage) {
            pageBtn.classList.add('active');
        }
        pageBtn.addEventListener('click', () => updatePage(i));
        container.appendChild(pageBtn);
    }

    // 最后一页和省略号
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            const ellipsis = document.createElement('span');
            ellipsis.textContent = '...';
            container.appendChild(ellipsis);
        }

        const lastBtn = document.createElement('button');
        lastBtn.textContent = totalPages;
        lastBtn.addEventListener('click', () => updatePage(totalPages));
        container.appendChild(lastBtn);
    }

    // 下一页按钮
    if (currentPage < totalPages) {
        const nextBtn = document.createElement('button');
        nextBtn.textContent = '下一页';
        nextBtn.addEventListener('click', () => updatePage(currentPage + 1));
        container.appendChild(nextBtn);
    }

    function updatePage(newPage) {
        console.log('跳转到页面:', newPage);
        createAdvancedPagination(totalItems, itemsPerPage, newPage, containerId, maxVisiblePages);
    }
}

使用现有库实现分页

如果需要更复杂的功能，可以考虑使用现有库如：

• Pagination.js
• jQuery Pagination
• Bootstrap Pagination组件

这些库通常提供更多定制选项和更好的浏览器兼容性。