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

本文轉載自查看原文 2019-03-06 15:19 6158 轉載/ 前端分頁原理

原文轉載：點我

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

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

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

結構層只需要一個容器

    <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 --必填
        });

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

　　完整代碼：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>pagination-nick</title>
  6     <style>
  7         button{
  8             padding:5px;
  9             margin:5px;
 10         }
 11         .active-nick{
 12             color:red;
 13         }
 14         input{
 15             width:50px;
 16             text-align:center;
 17         }
 18     </style>
 19 </head>
 20 <body>
 21     <div class="pagination-nick"></div>
 22     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 23     <script>
 24 //        定義一個分頁方法，可多次調用
 25         function paginationNick(opt){
 26 //            參數設置
 27             var pager={
 28                 paginationBox:'',//分頁容器-- 必填
 29                 mainBox:'',//內容盒子--必填
 30                 numBtnBox:'',//數字按鈕盒子-- 必填
 31                 btnBox:'',//按鈕盒子 --必填
 32                 ipt:'',//input class-- 必填
 33                 goBtn:'',//go btn class --必填
 34                 currentBtn:'',//當前按鈕class name --必填
 35                 pageCount:5,//每頁顯示幾條數據
 36                 numBtnCount:3,//當前頁左右兩邊各多少個數字按鈕
 37                 currentPage:0,//當前頁碼data-page，首屏默認值
 38                 maxCount:0,//ajax請求數據分成的最大頁碼
 39                 data:[]//ajax請求的數據
 40             };
 41             pager = $.extend(pager,opt);
 42             //請求數據頁面跳轉方法
 43             function goPage(btn){
 44                 //obj為ajax請求數據
 45                 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]};
 46                 //將展示的數據賦值給pager.data  (array)
 47                 pager.data=obj.value;
 48                 //設置ajax請求數據分成的最大頁碼
 49                 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
 50                     pager.data.length / pager.pageCount;
 51 
 52 //                設置當前頁碼
 53                 if(!isNaN(btn)){//數字按鈕
 54                     pager.currentPage=parseInt(btn);
 55                 }else{
 56                     switch(btn){
 57                         case 'first':
 58                             pager.currentPage=0;
 59                             break;
 60                         case 'prev':
 61                             if(pager.currentPage>0){
 62                                 --pager.currentPage;
 63                             }
 64                             break;
 65                         case 'next':
 66                             if(pager.currentPage+1<pager.maxCount){
 67                                 ++pager.currentPage;
 68                             }
 69                             break;
 70                         case 'last':
 71                             pager.currentPage=pager.maxCount-1;
 72                             break;
 73                     }
 74                 }
 75                 //創建數字按鈕
 76                 createNumBtn(pager.currentPage);
 77                 //賦值給頁碼跳轉輸入框的value，表示當前頁碼
 78                 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
 79 //              內容區填充數據
 80                 var arr=[],str='';
 81                 arr=pager.data.slice(pager.pageCount*pager.currentPage,
 82                         pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
 83                         pager.pageCount*(pager.currentPage+1) : pager.data.length);
 84                 arr.forEach(function(v){
 85                     str+='<div>'+v+'</div>';
 86                 });
 87                 $('.'+pager.mainBox).html(str);
 88             }
 89             //創建非數字按鈕和數據內容區
 90             function createOtherBtn(){
 91                 $('.'+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>');
 92                 //ipt value變化並賦值給go btn data-page
 93                 $('.'+pager.btnBox+' .'+pager.ipt).change(function(){
 94                     if(!isNaN($(this).val())){//是數字
 95                         if($(this).val() > pager.maxCount){//限制value最大值，跳轉尾頁
 96                             $(this).val(pager.maxCount);
 97                         }
 98                         if($(this).val()<1){//限制value最小值，跳轉首頁
 99                             $(this).val(1);
100                         }
101                     }else{//非數字清空value
102                         $(this).val('');
103                     }
104                     $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
105                 });
106                 //每個btn綁定請求數據頁面跳轉方法
107                 $('.'+pager.btnBox+' button').each(function(i,v){
108                     $(this).click(function(){
109                         //有值且不是上一次的頁碼時才調用
110                         if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
111                             goPage(v.getAttribute('data-page'));
112                         }
113                     });
114                 });
115             }
116             //創建數字按鈕
117             function createNumBtn(page){
118                 //page是頁面index從0開始，這里的page加減一要注意
119                 var str='';
120                 if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數大於等於固定數字按鈕總數（pager.numBtnCount*2+1）時
121                     //此頁左邊右邊各pager.numBtnCount個數字按鈕
122                     if(page-pager.numBtnCount>-1){//此頁左邊有pager.numBtnCount頁 page頁碼從0開始
123                         for(var m=pager.numBtnCount;m>0;m--){
124                             str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
125                         }
126                     }else{
127                         for(var k=0;k<page;k++){
128                             str+='<button data-page="'+k+'">'+(k+1)+'</button>';
129                         }
130                     }
131                     str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
132                     if(pager.maxCount-page>3){//此頁右邊有pager.numBtnCount頁 page頁碼從0開始
133                         for(var j=1;j<pager.numBtnCount+1;j++){
134                             str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
135                         }
136                     }else{
137                         for(var i=page+1;i<pager.maxCount;i++){
138                             str+='<button data-page="'+i+'">'+(i+1)+'</button>';
139                         }
140                     }
141                     /*數字按鈕總數小於固定的數字按鈕總數pager.numBtnCount*2+1時，
142                      這個分支，可以省略*/
143                     if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
144                         str='';
145                         if(page<pager.numBtnCount){//此頁左邊頁碼少於固定按鈕數時
146                             for(var n=0;n<page;n++){//此頁左邊
147                                 str+='<button data-page="'+n+'">'+(n+1)+'</button>';
148                             }
149                             str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
150                             for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此頁右邊
151                                 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
152                             }
153                         }
154                         if(pager.maxCount-page-1<pager.numBtnCount){
155                             for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此頁左邊
156                                 str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
157                             }
158                             str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
159                             for(var z=page+1;z<pager.maxCount;z++){//此頁右邊
160                                 str+='<button data-page="'+z+'">'+(z+1)+'</button>';
161                             }
162                         }
163                     }
164                 }else{
165                     str='';
166                     for(var n=0;n<page;n++){//此頁左邊
167                         str+='<button data-page="'+n+'">'+(n+1)+'</button>';
168                     }
169                     str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此頁
170                     for(var x=1;x<pager.maxCount-page;x++){//此頁右邊
171                         str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
172                     }
173                 }
174 
175                 $('.'+pager.numBtnBox).html(str);
176 
177                 //每個btn綁定請求數據頁面跳轉方法
178                 $('.'+pager.numBtnBox+' button').each(function(i,v){
179                     $(this).click(function(){
180                         goPage(v.getAttribute('data-page'));
181                     });
182                 });
183 
184                 //按鈕禁用
185                 $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
186                 if(!page){//首頁時
187                     $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
188                     $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
189                 }
190                 if(page==pager.maxCount-1){//尾頁時
191                     $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
192                     $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
193                 }
194             }
195 
196             //首屏加載
197             createOtherBtn();//首屏加載一次非數字按鈕即可
198             goPage();//請求數據頁面跳轉滿足條件按鈕點擊都執行，首屏默認跳轉到currentPage
199         }
200         //調用
201         paginationNick({
202             paginationBox:'pagination-nick',//分頁容器--必填
203             mainBox:'main-box-nick',//內容盒子--必填
204             numBtnBox:'num-box-nick',//數字按鈕盒子-- 必填
205             btnBox:'btn-box-nick',//按鈕盒子 --必填
206             ipt:'page-ipt-nick',//input class-- 必填
207             goBtn:'go-btn-nick',//go btn class --必填
208             currentBtn:'active-nick'//當前按鈕class name --必填
209         });
210     </script>
211 </body>
212 </html>

View Code

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於LayUI實現前端分頁功能 vue實現簡單的前端分頁功能 vue前端分頁功能 SpringBoot的開發(3)--前端頁面的搭建、前端頁面的編寫、分頁和增刪改查功能的實現 vue實現分頁功能 winform 實現分頁功能分頁功能的實現 js分頁功能實現 PageHelper實現分頁原理分頁技術原理與實現(一)