分页功能代码怎么写？分页功能技术的前端实现

本文将介绍数据分页的前端代码实现，非后端查询分页。

自己实现分页的好处不言而喻，皮肤样式定制型强啊。

整个分页的核心逻辑也就下面这段，不管总页数有多少页，我们只需要处理好展示在网页上的这5个的规律，也就能解决所有的问题了。

1.总页数 <= 一页能展示的分页数 
2.总页数 > 一页能展示的分页数
  2.1 当前选中页 <= 一页能展示的分页数的一半（大方向取整）
  2.2 当前选中页 > 一页能展示的分页数的一半（大方向取整）
    2.2.1 如果选中最后几页，起始位置和终点是固定不变的

下面是分页的核心代码（以下代码是nodejs实现，其他语言原理想通）：

// 数据库查询的分页数据
const data = {
    pageCount: 总页数,
    currentPage:当前页
}


// 分页按钮数量
const paginationNumber = 7; 

// 开始数和结束数
let startNum = 1;
let endNum = data.pageCount;

// 以下是核心逻辑实现
if (data.pageCount <= paginationNumber) {
    startNum = 1;
    endNum = data.pageCount;
} else {
    if (data.currentPage <= Math.ceil(paginationNumber/2)) {
        startNum = 1;
        endNum = paginationNumber;
    } else {
        startNum = data.currentPage - (Math.ceil(paginationNumber/2)-1);
        endNum = data.currentPage + (Math.ceil(paginationNumber/2)-1);
        if (endNum > data.pageCount) {
            endNum = data.pageCount;
            startNum = data.pageCount - (paginationNumber-1);
        }
    }
}

通过上面核心代码已经获取了 startNum和endNum的值了，现在循环输出即可。完整分页函数：

pagination(data, paginationNumber = 7){
    // 开始数和结束数
    let startNum = 1;
    let endNum = data.pageCount;
    
    // 以下是核心逻辑实现
    if (data.pageCount <= paginationNumber) {
        startNum = 1;
        endNum = data.pageCount;
    } else {
        if (data.currentPage <= Math.ceil(paginationNumber/2)) {
            startNum = 1;
            endNum = paginationNumber;
        } else {
            startNum = data.currentPage - (Math.ceil(paginationNumber/2)-1);
            endNum = data.currentPage + (Math.ceil(paginationNumber/2)-1);
            if (endNum > data.pageCount) {
                endNum = data.pageCount;
                startNum = data.pageCount - (paginationNumber-1);
            }
        }
    }
    
    // 获取当前页url，todo::此处逻辑根据自己业务实现
    const _url = {当前页url};
    
    // 输出html
    let _html = '';
    if(data.currentPage>1){
        _html += `<li class="page-item prev"><a class="page-link" href="${_url}">首页</a></li>`;
        _html += `<li class="page-item prev"><a class="page-link" href="${_url}page=${data.currentPage-1}">上一页</a></li>`;
    }else{
        _html += `<li class="page-item prev disabled"><span class="page-link">首页</span></li>`;
        _html += `<li class="page-item prev disabled"><span class="page-link">上一页</span></li>`;
    }
    
    for (let i=startNum;i<=endNum;i++){
    _html += `<li class="page-item${i === data.currentPage?' active':''}"><a class="page-link" href="${_url}page=${i}">${i}</a></li>`;
    }
    
    if(data.currentPage<data.pageCount){
        _html += `<li class="page-item prev"><a class="page-link" href="${_url}page=${data.currentPage+1}">下一页</a></li>`;
        _html += `<li class="page-item prev"><a class="page-link" href="${_url}page=${data.pageCount}">尾页</a></li>`;
    }else{
        _html += `<li class="page-item prev disabled"><span class="page-link">下一页</span></li>`;
        _html += `<li class="page-item prev disabled"><span class="page-link">尾页</span></li>`;
    }
    
    return `<ul class="pagination">${_html}</ul>`;
}