Bootstrap仿百度分页

划水摸鱼的时候研究了下百度分页，在此分享一下！

效果图：

效果图.png

引用文件：

CSS：

.noPadding{
    padding: 0;
}

HTML：

    
    

        

            

                
首页
                
上一页
                

                
下一页
                
尾页
            
        
    

JS：

var currentPage,totalPage; //当前页数,总页数

$(document).ready(function () {
    //初始加载赋值当前页和总页数
    currentPage = 20;
    totalPage = 100;
    pagingFunc(currentPage, totalPage);
});

//分页函数
function pagingFunc(currentPage, totalPage) {
    var pNs = "";
    //显示当前所有页码的数组
    var pageArray = [];
    //总页数小于11页的情况
    if (totalPage < 11) {
        for(var i = 0;i < totalPage; i++){
            pageArray.push(i + 1);
        }
    }else if (currentPage > 5 && (totalPage - currentPage) > 3) { //当前页大于5且总页数减当前页大于3
        pageArray = [currentPage-5, currentPage-4, currentPage-3, currentPage-2, currentPage-1, currentPage, currentPage+1, currentPage+2, currentPage+3, currentPage+4]
    }else if (currentPage > 5 && (totalPage - currentPage) < 4) { //当前页大于5且总页数减当前页小于4
        pageArray = [totalPage-9, totalPage-8, totalPage-7, totalPage-6, totalPage-5, totalPage-4, totalPage-3, totalPage-2, totalPage-1, totalPage]
    }else if (currentPage < 6 && totalPage > 9) { //当前页小于6且总页数大于9
        for(var i = 0;i < 10; i++){
            pageArray.push(i + 1);
        }
    }
    //当前页对应的页码加高亮
    for(var h = 0;h < pageArray.length; h++){
        if(pageArray[h] == currentPage){
            pNs += '
'+ pageArray[h] +'
';
        }else{
            pNs += '
'+ pageArray[h] +'
';
        }
    }
    $("#paging #numList").html(pNs);
    if (currentPage == 1 && totalPage != 1) { //如果当前页等于1且总页数不等于1，则首页和上一页按钮隐藏
        $('#first-page').css('display', 'none');
        $('#pre-page').css('display', 'none');
        $('#last-page').css('display', 'block');
        $('#next-page').css('display', 'block');
    } else if (currentPage == 1 && totalPage == 1){ //如果当前页等于1且总页数等于1，则首页、上一页、尾页、下一页按钮隐藏
        $('#last-page').css('display', 'none');
        $('#next-page').css('display', 'none');
        $('#first-page').css('display', 'none');
        $('#pre-page').css('display', 'none');
    } else if (currentPage == totalPage && totalPage != 1) { //如果当前页等于总页数且总页数不等于1，则尾页和下一页按钮隐藏
        $('#last-page').css('display', 'none');
        $('#next-page').css('display', 'none');
        $('#first-page').css('display', 'block');
        $('#pre-page').css('display', 'block');
    } else { //以上条件都不满足则所有按钮均可用
        $('#first-page').css('display', 'block');
        $('#pre-page').css('display', 'block');
        $('#last-page').css('display', 'block');
        $('#next-page').css('display', 'block');
    }
}

//点击页码
$("ul#numList").on("click","li",function(){
    currentPage = parseInt($(this).text());
    pagingFunc(currentPage, totalPage);
});
//点击上一页按钮
$('#pre-page').click(function(){
    currentPage--;
    pagingFunc(currentPage, totalPage);
});
//点击下一页按钮
$('#next-page').click(function(){
    currentPage++;
    pagingFunc(currentPage, totalPage);
});
//点击首页按钮
$('#first-page').click(function () {
    currentPage = 1;
    pagingFunc(currentPage, totalPage);
});
//点击尾页按钮
$('#last-page').click(function () {
    currentPage = totalPage;
    pagingFunc(currentPage, totalPage);
});

参考链接：点击前往