劃水摸魚(yú)的時(shí)候研究了下百度分頁(yè)许起，在此分享一下！

效果圖：

效果圖.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">
    <!-- 分頁(yè) -->
    <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:;">首頁(yè)</a></li></ul>
                <ul class="pagination"><li id="pre-page"><a href="javascript:;">上一頁(yè)</a></li></ul>
                <ul class="pagination" id="numList"></ul>
                <ul class="pagination"><li id="next-page"><a href="javascript:;">下一頁(yè)</a></li></ul>
                <ul class="pagination"><li id="last-page"><a href="javascript:;">尾頁(yè)</a></li></ul>
            </nav>
        </div>
    </div>
</div>

JS：

var currentPage,totalPage; //當(dāng)前頁(yè)數(shù),總頁(yè)數(shù)

$(document).ready(function () {
    //初始加載賦值當(dāng)前頁(yè)和總頁(yè)數(shù)
    currentPage = 20;
    totalPage = 100;
    pagingFunc(currentPage, totalPage);
});

//分頁(yè)函數(shù)
function pagingFunc(currentPage, totalPage) {
    var pNs = "";
    //顯示當(dāng)前所有頁(yè)碼的數(shù)組
    var pageArray = [];
    //總頁(yè)數(shù)小于11頁(yè)的情況
    if (totalPage < 11) {
        for(var i = 0;i < totalPage; i++){
            pageArray.push(i + 1);
        }
    }else if (currentPage > 5 && (totalPage - currentPage) > 3) { //當(dāng)前頁(yè)大于5且總頁(yè)數(shù)減當(dāng)前頁(yè)大于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) { //當(dāng)前頁(yè)大于5且總頁(yè)數(shù)減當(dāng)前頁(yè)小于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) { //當(dāng)前頁(yè)小于6且總頁(yè)數(shù)大于9
        for(var i = 0;i < 10; i++){
            pageArray.push(i + 1);
        }
    }
    //當(dāng)前頁(yè)對(duì)應(yīng)的頁(yè)碼加高亮
    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) { //如果當(dāng)前頁(yè)等于1且總頁(yè)數(shù)不等于1，則首頁(yè)和上一頁(yè)按鈕隱藏
        $('#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){ //如果當(dāng)前頁(yè)等于1且總頁(yè)數(shù)等于1窜锯，則首頁(yè)熏挎、上一頁(yè)、尾頁(yè)前痘、下一頁(yè)按鈕隱藏
        $('#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) { //如果當(dāng)前頁(yè)等于總頁(yè)數(shù)且總頁(yè)數(shù)不等于1凛捏，則尾頁(yè)和下一頁(yè)按鈕隱藏
        $('#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');
    }
}

//點(diǎn)擊頁(yè)碼
$("ul#numList").on("click","li",function(){
    currentPage = parseInt($(this).text());
    pagingFunc(currentPage, totalPage);
});
//點(diǎn)擊上一頁(yè)按鈕
$('#pre-page').click(function(){
    currentPage--;
    pagingFunc(currentPage, totalPage);
});
//點(diǎn)擊下一頁(yè)按鈕
$('#next-page').click(function(){
    currentPage++;
    pagingFunc(currentPage, totalPage);
});
//點(diǎn)擊首頁(yè)按鈕
$('#first-page').click(function () {
    currentPage = 1;
    pagingFunc(currentPage, totalPage);
});
//點(diǎn)擊尾頁(yè)按鈕
$('#last-page').click(function () {
    currentPage = totalPage;
    pagingFunc(currentPage, totalPage);
});

參考鏈接：點(diǎn)擊前往