前端分頁功能的實現以及原理

　　分頁場景常見於電商網站，比如說淘寶天貓的評論區，分頁功能一般是后台實現，前端請求就完事了。現閑得無聊，就寫出來玩玩，只實現功能，並未封裝。

以前寫過一篇下拉刷新、加載數據功能博客，也附上鏈接，可點擊查看！

基於jq實現分頁功能，大致分為以下幾步：

1. 定義一個分頁方法，可多次調用
2. 參數設置
3. 請求數據頁面跳轉方法
4. 創建非數字按鈕和數據內容區
5. 創建數字按鈕
6. 首屏加載
7. 調用

結構層只需要一個容器

    <div class="pagination-nick"></div>

一、定義分頁方法

function paginationNick(opt){ //code
}

二、參數設置

　　幾個必填的容器class，和幾個可以修改的默認數據參數

var pager={ paginationBox:'',//分頁容器-- 必填
                mainBox:'',//內容盒子--必填
                numBtnBox:'',//數字按鈕盒子-- 必填
                btnBox:'',//按鈕盒子 --必填
                ipt:'',//input class-- 必填
                goBtn:'',//go btn class --必填
                currentBtn:'',//當前按鈕class name --必填
                pageCount:5,//每頁顯示幾條數據
                numBtnCount:3,//當前頁左右兩邊各多少個數字按鈕
                currentPage:0,//當前頁碼data-page，首屏默認值
                maxCount:0,//ajax請求數據分成的最大頁碼
                data:[]//ajax請求的數據
 }; pager = $.extend(pager,opt);

三、請求數據頁面跳轉方法

　　創建所有的按鈕時都用了自定義屬性data-page保留要跳轉的頁碼信息，調用時將此屬性作為參數用於跳轉頁面判斷。

function goPage(btn){ //code
}

obj為ajax請求數據（用於模擬）

var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};

將展示的數據賦值給pager.data (array)

  pager.data=obj.value;

設置ajax請求數據分成的最大頁碼

 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount;

設置當前頁碼

                if(!isNaN(btn)){//數字按鈕
                    pager.currentPage=parseInt(btn); }else{ switch(btn){ case 'first': pager.currentPage=0; break; case 'prev': if(pager.currentPage>0){ --pager.currentPage; } break; case 'next': if(pager.currentPage+1<pager.maxCount){ ++pager.currentPage; } break; case 'last': pager.currentPage=pager.maxCount-1; break; } }

創建數字按鈕

  createNumBtn(pager.currentPage);

賦值給頁碼跳轉輸入框的value，表示當前頁碼

 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);

內容區填充數據

                var arr=[],str=''; arr=pager.data.slice(pager.pageCount*pager.currentPage, pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ? pager.pageCount*(pager.currentPage+1) : pager.data.length); arr.forEach(function(v){ str+='<div>'+v+'</div>'; }); $('.'+pager.mainBox).html(str);

四、創建非數字按鈕和數據內容區

 function createOtherBtn(){ //code
}

內容填充

  $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">確定go</button><button data-page="last" class="last-btn">尾頁</button></div><div class="'+pager.mainBox+'"></div>');

監聽ipt value變化並賦值給go btn data-page

$('.'+pager.btnBox+' .'+pager.ipt).change(function(){ if(!isNaN($(this).val())){//是數字
                        　　　　　　　　if($(this).val() > pager.maxCount){//限制value最大值，跳轉尾頁
                            　　　　　　　　　$(this).val(pager.maxCount); } if($(this).val()<1){//限制value最小值，跳轉首頁
                            $(this).val(1); } }else{//非數字清空value
                        $(this).val(''); } $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : ''); });

每個btn綁定請求數據頁面跳轉方法

                $('.'+pager.btnBox+' button').each(function(i,v){ $(this).click(function(){ //有值且不是上一次的頁碼時才調用
                        if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){ goPage(v.getAttribute('data-page')); } }); });

五、創建數字按鈕

 function createNumBtn(page){ //code
}

創建數字按鈕區

　　將數字按鈕區分成當前頁左右2邊分析，需要注意的地方都加注釋了

                var str=''; if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
                    //此頁左邊右邊各pager.numBtnCount個數字按鈕
                    if(page-pager.numBtnCount>-1){//此頁左邊有pager.numBtnCount頁 page頁碼從0開始
                        for(var m=pager.numBtnCount;m>0;m--){ str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>'; } }else{ for(var k=0;k<page;k++){ str+='<button data-page="'+k+'">'+(k+1)+'</button>'; } } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                    if(pager.maxCount-page>3){//此頁右邊有pager.numBtnCount頁 page頁碼從0開始
                        for(var j=1;j<pager.numBtnCount+1;j++){ str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>'; } }else{ for(var i=page+1;i<pager.maxCount;i++){ str+='<button data-page="'+i+'">'+(i+1)+'</button>'; } } /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時， 這個分支，可以省略*/
                    if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){ str=''; if(page<pager.numBtnCount){//此頁左邊頁碼少於固定按鈕數時
                            for(var n=0;n<page;n++){//此頁左邊
                                　　str+='<button data-page="'+n+'">'+(n+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                            for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此頁右邊
                               　　 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>'; } } 　　if(pager.maxCount-page-1<pager.numBtnCount){ 　　　　for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此頁左邊
                                　　　　　　str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                            for(var z=page+1;z<pager.maxCount;z++){//此頁右邊
                               　　 str+='<button data-page="'+z+'">'+(z+1)+'</button>'; } } } }else{ str=''; for(var n=0;n<page;n++){//此頁左邊
                        　　　　　str+='<button data-page="'+n+'">'+(n+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                    for(var x=1;x<pager.maxCount-page;x++){//此頁右邊
                        　　　　str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>'; } } $('.'+pager.numBtnBox).html(str);

每個btn綁定請求數據頁面跳轉方法

                $('.'+pager.numBtnBox+' button').each(function(i,v){ $(this).click(function(){ goPage(v.getAttribute('data-page')); }); });

按鈕禁用

                $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false); if(!page){//首頁時
                    　　　　　　$('.'+pager.btnBox+' .first-btn').attr('disabled',true); $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled'); } if(page==pager.maxCount-1){//尾頁時
                    　　　　　　$('.'+pager.btnBox+' .last-btn').attr('disabled',true); $('.'+pager.btnBox+' .next-btn').attr('disabled',true); }

六、首屏加載

            createOtherBtn();//首屏加載一次非數字按鈕即可
            goPage();//請求數據頁面跳轉滿足條件按鈕點擊都執行，首屏默認跳轉到currentPage

七、調用

paginationNick({ paginationBox:'pagination-nick',//分頁容器--必填
            mainBox:'main-box-nick',//內容盒子--必填
            numBtnBox:'num-box-nick',//數字按鈕盒子-- 必填
            btnBox:'btn-box-nick',//按鈕盒子 --必填
            ipt:'page-ipt-nick',//input class-- 必填
            goBtn:'go-btn-nick',//go btn class --必填
            currentBtn:'active-nick'//當前按鈕class name --必填
        });

　　需要注意的地方，注釋都加上了！ 

　　完整代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination-nick</title>
    <style> button{ padding:5px; margin:5px;
        } .active-nick{ color:red;
        } input{ width:50px; text-align:center;
        }
    </style>
</head>
<body>
    <div class="pagination-nick"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
// 定義一個分頁方法，可多次調用
        function paginationNick(opt){ // 參數設置
            var pager={ paginationBox:'',//分頁容器-- 必填
 mainBox:'',//內容盒子--必填
 numBtnBox:'',//數字按鈕盒子-- 必填
 btnBox:'',//按鈕盒子 --必填
 ipt:'',//input class-- 必填
 goBtn:'',//go btn class --必填
 currentBtn:'',//當前按鈕class name --必填
 pageCount:5,//每頁顯示幾條數據
 numBtnCount:3,//當前頁左右兩邊各多少個數字按鈕
 currentPage:0,//當前頁碼data-page，首屏默認值
 maxCount:0,//ajax請求數據分成的最大頁碼
 data:[]//ajax請求的數據
 }; pager = $.extend(pager,opt); //請求數據頁面跳轉方法
            function goPage(btn){ //obj為ajax請求數據
                var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]}; //將展示的數據賦值給pager.data (array)
 pager.data=obj.value; //設置ajax請求數據分成的最大頁碼
 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount; // 設置當前頁碼
                if(!isNaN(btn)){//數字按鈕
 pager.currentPage=parseInt(btn); }else{ switch(btn){ case 'first': pager.currentPage=0; break; case 'prev': if(pager.currentPage>0){ --pager.currentPage; } break; case 'next': if(pager.currentPage+1<pager.maxCount){ ++pager.currentPage; } break; case 'last': pager.currentPage=pager.maxCount-1; break; } } //創建數字按鈕
 createNumBtn(pager.currentPage); //賦值給頁碼跳轉輸入框的value，表示當前頁碼
 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1); // 內容區填充數據
                var arr=[],str=''; arr=pager.data.slice(pager.pageCount*pager.currentPage, pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ? pager.pageCount*(pager.currentPage+1) : pager.data.length); arr.forEach(function(v){ str+='<div>'+v+'</div>'; }); $('.'+pager.mainBox).html(str); } //創建非數字按鈕和數據內容區
            function createOtherBtn(){ $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首頁</button><button data-page="prev" class="prev-btn">上一頁</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一頁</button><input type="text" placeholder="請輸入頁碼" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">確定go</button><button data-page="last" class="last-btn">尾頁</button></div><div class="'+pager.mainBox+'"></div>'); //ipt value變化並賦值給go btn data-page
 $('.'+pager.btnBox+' .'+pager.ipt).change(function(){ if(!isNaN($(this).val())){//是數字
                        if($(this).val() > pager.maxCount){//限制value最大值，跳轉尾頁
 $(this).val(pager.maxCount); } if($(this).val()<1){//限制value最小值，跳轉首頁
 $(this).val(1); } }else{//非數字清空value
 $(this).val(''); } $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : ''); }); //每個btn綁定請求數據頁面跳轉方法
 $('.'+pager.btnBox+' button').each(function(i,v){ $(this).click(function(){ //有值且不是上一次的頁碼時才調用
                        if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){ goPage(v.getAttribute('data-page')); } }); }); } //創建數字按鈕
            function createNumBtn(page){ //page是頁面index從0開始，這里的page加減一要注意
                var str=''; if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
                    //此頁左邊右邊各pager.numBtnCount個數字按鈕
                    if(page-pager.numBtnCount>-1){//此頁左邊有pager.numBtnCount頁 page頁碼從0開始
                        for(var m=pager.numBtnCount;m>0;m--){ str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>'; } }else{ for(var k=0;k<page;k++){ str+='<button data-page="'+k+'">'+(k+1)+'</button>'; } } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                    if(pager.maxCount-page>3){//此頁右邊有pager.numBtnCount頁 page頁碼從0開始
                        for(var j=1;j<pager.numBtnCount+1;j++){ str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>'; } }else{ for(var i=page+1;i<pager.maxCount;i++){ str+='<button data-page="'+i+'">'+(i+1)+'</button>'; } } /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時， 這個分支，可以省略*/
                    if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){ str=''; if(page<pager.numBtnCount){//此頁左邊頁碼少於固定按鈕數時
                            for(var n=0;n<page;n++){//此頁左邊
 str+='<button data-page="'+n+'">'+(n+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                            for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此頁右邊
 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>'; } } if(pager.maxCount-page-1<pager.numBtnCount){ for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此頁左邊
 str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                            for(var z=page+1;z<pager.maxCount;z++){//此頁右邊
 str+='<button data-page="'+z+'">'+(z+1)+'</button>'; } } } }else{ str=''; for(var n=0;n<page;n++){//此頁左邊
 str+='<button data-page="'+n+'">'+(n+1)+'</button>'; } str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
                    for(var x=1;x<pager.maxCount-page;x++){//此頁右邊
 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>'; } } $('.'+pager.numBtnBox).html(str); //每個btn綁定請求數據頁面跳轉方法
 $('.'+pager.numBtnBox+' button').each(function(i,v){ $(this).click(function(){ goPage(v.getAttribute('data-page')); }); }); //按鈕禁用
 $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false); if(!page){//首頁時
 $('.'+pager.btnBox+' .first-btn').attr('disabled',true); $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled'); } if(page==pager.maxCount-1){//尾頁時
 $('.'+pager.btnBox+' .last-btn').attr('disabled',true); $('.'+pager.btnBox+' .next-btn').attr('disabled',true); } } //首屏加載
 createOtherBtn();//首屏加載一次非數字按鈕即可
 goPage();//請求數據頁面跳轉滿足條件按鈕點擊都執行，首屏默認跳轉到currentPage
 } //調用
 paginationNick({ paginationBox:'pagination-nick',//分頁容器--必填
 mainBox:'main-box-nick',//內容盒子--必填
 numBtnBox:'num-box-nick',//數字按鈕盒子-- 必填
 btnBox:'btn-box-nick',//按鈕盒子 --必填
 ipt:'page-ipt-nick',//input class-- 必填
 goBtn:'go-btn-nick',//go btn class --必填
 currentBtn:'active-nick'//當前按鈕class name --必填
 }); </script>
</body>
</html>

　　 至此，over。寫的有點low，但復制完整代碼此分頁功還是能實現的，若有大神改進，望瞻仰！