Bootstrap仿百度分页

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

效果图：

效果图.png

引用文件：

<link rel="stylesheet" href="./bootstrap.min.css"/> <!-- bootstrap-3.3.7 -->
<script src="./jquery.min.js" type="text/javascript"></script> <!-- jquery-1.12.1 -->
<script src="./bootstrap.min.js" type="text/javascript"></script> <!-- bootstrap-3.3.7 -->

CSS：

.noPadding{
    padding: 0;
}

HTML：

<div class="container-fluid noPadding">
    <!-- 分页 -->
    <div class="row" id="paging">
        <div class="col-md-12 text-left navigation-area">
            <nav aria-label="page navigation">
                <ul class="pagination"><li id="first-page"><a href="javascript:;">首页</a></li></ul>
                <ul class="pagination"><li id="pre-page"><a href="javascript:;">上一页</a></li></ul>
                <ul class="pagination" id="numList"></ul>
                <ul class="pagination"><li id="next-page"><a href="javascript:;">下一页</a></li></ul>
                <ul class="pagination"><li id="last-page"><a href="javascript:;">尾页</a></li></ul>
            </nav>
        </div>
    </div>
</div>

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 += '<li class="active"><a href="javascript:;">'+ pageArray[h] +'</a></li>';
        }else{
            pNs += '<li><a href="javascript:;">'+ pageArray[h] +'</a></li>';
        }
    }
    $("#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);
});

参考链接：点击前往