js实现页码

JavaScript 实现分页功能

基本分页逻辑实现

function paginate(totalItems, currentPage = 1, pageSize = 10) {
    const totalPages = Math.ceil(totalItems / pageSize);

    // 确保当前页在有效范围内
    currentPage = Math.max(1, Math.min(currentPage, totalPages));

    // 计算起始和结束索引
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    return {
        totalItems,
        currentPage,
        pageSize,
        totalPages,
        startIndex,
        endIndex
    };
}

前端分页显示控制

function renderPagination(totalPages, currentPage) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';

    // 上一页按钮
    if (currentPage > 1) {
        const prevLink = document.createElement('a');
        prevLink.href = '#';
        prevLink.textContent = '«';
        prevLink.onclick = () => updatePage(currentPage - 1);
        pagination.appendChild(prevLink);
    }

    // 页码按钮
    for (let i = 1; i <= totalPages; i++) {
        const pageLink = document.createElement('a');
        pageLink.href = '#';
        pageLink.textContent = i;
        if (i === currentPage) {
            pageLink.className = 'active';
        }
        pageLink.onclick = () => updatePage(i);
        pagination.appendChild(pageLink);
    }

    // 下一页按钮
    if (currentPage < totalPages) {
        const nextLink = document.createElement('a');
        nextLink.href = '#';
        nextLink.textContent = '»';
        nextLink.onclick = () => updatePage(currentPage + 1);
        pagination.appendChild(nextLink);
    }
}

数据分页处理示例

function getPaginatedData(data, pageInfo) {
    return data.slice(pageInfo.startIndex, pageInfo.endIndex + 1);
}

// 使用示例
const allData = [...]; // 你的数据数组
const pageInfo = paginate(allData.length, 2, 5);
const currentPageData = getPaginatedData(allData, pageInfo);
renderPagination(pageInfo.totalPages, pageInfo.currentPage);

高级分页优化（显示部分页码）

function renderSmartPagination(totalPages, currentPage, maxVisible = 5) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';

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

    // 调整显示范围
    if (endPage - startPage + 1 < maxVisible) {
        startPage = Math.max(1, endPage - maxVisible + 1);
    }

    // 第一页和省略号
    if (startPage > 1) {
        const firstLink = document.createElement('a');
        firstLink.href = '#';
        firstLink.textContent = '1';
        firstLink.onclick = () => updatePage(1);
        pagination.appendChild(firstLink);

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

    // 页码按钮
    for (let i = startPage; i <= endPage; i++) {
        const pageLink = document.createElement('a');
        pageLink.href = '#';
        pageLink.textContent = i;
        if (i === currentPage) {
            pageLink.className = 'active';
        }
        pageLink.onclick = () => updatePage(i);
        pagination.appendChild(pageLink);
    }

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

        const lastLink = document.createElement('a');
        lastLink.href = '#';
        lastLink.textContent = totalPages;
        lastLink.onclick = () => updatePage(totalPages);
        pagination.appendChild(lastLink);
    }
}

样式建议

#pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

#pagination a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 4px;
}

#pagination a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

#pagination a:hover:not(.active) {
    background-color: #ddd;
}

这些代码提供了从基本到高级的分页实现方案，可以根据项目需求选择适合的方案或进行组合使用。