您好,登錄后才能下訂單哦!
分頁場景常見于電商網(wǎng)站,比如說淘寶天貓的評論區(qū),分頁功能一般是后臺實現(xiàn),前端請求就完事了?,F(xiàn)閑得無聊,就寫出來玩玩,只實現(xiàn)功能,并未封裝。
基于jq實現(xiàn)分頁功能,大致分為以下幾步:
結(jié)構(gòu)層只需要一個容器
<div class="pagination-nick"></div>
一、定義分頁方法
function paginationNick(opt){ //code }
二、參數(shù)設(shè)置
幾個必填的容器class,和幾個可以修改的默認數(shù)據(jù)參數(shù)
var pager={ paginationBox:'',//分頁容器-- 必填 mainBox:'',//內(nèi)容盒子--必填 numBtnBox:'',//數(shù)字按鈕盒子-- 必填 btnBox:'',//按鈕盒子 --必填 ipt:'',//input class-- 必填 goBtn:'',//go btn class --必填 currentBtn:'',//當前按鈕class name --必填 pageCount:5,//每頁顯示幾條數(shù)據(jù) numBtnCount:3,//當前頁左右兩邊各多少個數(shù)字按鈕 currentPage:0,//當前頁碼data-page,首屏默認值 maxCount:0,//ajax請求數(shù)據(jù)分成的最大頁碼 data:[]//ajax請求的數(shù)據(jù) }; pager = $.extend(pager,opt);
三、請求數(shù)據(jù)頁面跳轉(zhuǎn)方法
創(chuàng)建所有的按鈕時都用了自定義屬性data-page保留要跳轉(zhuǎn)的頁碼信息,調(diào)用時將此屬性作為參數(shù)用于跳轉(zhuǎn)頁面判斷。
function goPage(btn){ //code }
obj為ajax請求數(shù)據(jù)(用于模擬)
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]};
將展示的數(shù)據(jù)賦值給pager.data (array)
pager.data=obj.value;
設(shè)置ajax請求數(shù)據(jù)分成的最大頁碼
pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount;
設(shè)置當前頁碼
if(!isNaN(btn)){//數(shù)字按鈕 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; } }
創(chuàng)建數(shù)字按鈕
createNumBtn(pager.currentPage);
賦值給頁碼跳轉(zhuǎn)輸入框的value,表示當前頁碼
$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
內(nèi)容區(qū)填充數(shù)據(jù)
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);
四、創(chuàng)建非數(shù)字按鈕和數(shù)據(jù)內(nèi)容區(qū)
function createOtherBtn(){ //code }
內(nèi)容填充
$('.'+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>');
監(jiān)聽ipt value變化并賦值給go btn data-page
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){ if(!isNaN($(this).val())){//是數(shù)字 if($(this).val() > pager.maxCount){//限制value最大值,跳轉(zhuǎn)尾頁 $(this).val(pager.maxCount); } if($(this).val()<1){//限制value最小值,跳轉(zhuǎn)首頁 $(this).val(1); } }else{//非數(shù)字清空value $(this).val(''); } $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : ''); });
每個btn綁定請求數(shù)據(jù)頁面跳轉(zhuǎn)方法
$('.'+pager.btnBox+' button').each(function(i,v){ $(this).click(function(){ //有值且不是上一次的頁碼時才調(diào)用 if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){ goPage(v.getAttribute('data-page')); } }); });
五、創(chuàng)建數(shù)字按鈕
function createNumBtn(page){ //code }
創(chuàng)建數(shù)字按鈕區(qū)
將數(shù)字按鈕區(qū)分成當前頁左右2邊分析,需要注意的地方都加注釋了
var str=''; if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數(shù)大于等于固定數(shù)字按鈕總數(shù)(pager.numBtnCount*2+1)時 //此頁左邊右邊各pager.numBtnCount個數(shù)字按鈕 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>'; } } /*數(shù)字按鈕總數(shù)小于固定的數(shù)字按鈕總數(shù)pager.numBtnCount*2+1時, 這個分支,可以省略*/ if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){ str=''; if(page<pager.numBtnCount){//此頁左邊頁碼少于固定按鈕數(shù)時 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綁定請求數(shù)據(jù)頁面跳轉(zhuǎn)方法
$('.'+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();//首屏加載一次非數(shù)字按鈕即可 goPage();//請求數(shù)據(jù)頁面跳轉(zhuǎn)滿足條件按鈕點擊都執(zhí)行,首屏默認跳轉(zhuǎn)到currentPage
七、調(diào)用
paginationNick({ paginationBox:'pagination-nick',//分頁容器--必填 mainBox:'main-box-nick',//內(nèi)容盒子--必填 numBtnBox:'num-box-nick',//數(shù)字按鈕盒子-- 必填 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> // 定義一個分頁方法,可多次調(diào)用 function paginationNick(opt){ // 參數(shù)設(shè)置 var pager={ paginationBox:'',//分頁容器-- 必填 mainBox:'',//內(nèi)容盒子--必填 numBtnBox:'',//數(shù)字按鈕盒子-- 必填 btnBox:'',//按鈕盒子 --必填 ipt:'',//input class-- 必填 goBtn:'',//go btn class --必填 currentBtn:'',//當前按鈕class name --必填 pageCount:5,//每頁顯示幾條數(shù)據(jù) numBtnCount:3,//當前頁左右兩邊各多少個數(shù)字按鈕 currentPage:0,//當前頁碼data-page,首屏默認值 maxCount:0,//ajax請求數(shù)據(jù)分成的最大頁碼 data:[]//ajax請求的數(shù)據(jù) }; pager = $.extend(pager,opt); //請求數(shù)據(jù)頁面跳轉(zhuǎn)方法 function goPage(btn){ //obj為ajax請求數(shù)據(jù) 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]}; //將展示的數(shù)據(jù)賦值給pager.data (array) pager.data=obj.value; //設(shè)置ajax請求數(shù)據(jù)分成的最大頁碼 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount; // 設(shè)置當前頁碼 if(!isNaN(btn)){//數(shù)字按鈕 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; } } //創(chuàng)建數(shù)字按鈕 createNumBtn(pager.currentPage); //賦值給頁碼跳轉(zhuǎn)輸入框的value,表示當前頁碼 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1); // 內(nèi)容區(qū)填充數(shù)據(jù) 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); } //創(chuàng)建非數(shù)字按鈕和數(shù)據(jù)內(nèi)容區(qū) 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())){//是數(shù)字 if($(this).val() > pager.maxCount){//限制value最大值,跳轉(zhuǎn)尾頁 $(this).val(pager.maxCount); } if($(this).val()<1){//限制value最小值,跳轉(zhuǎn)首頁 $(this).val(1); } }else{//非數(shù)字清空value $(this).val(''); } $('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : ''); }); //每個btn綁定請求數(shù)據(jù)頁面跳轉(zhuǎn)方法 $('.'+pager.btnBox+' button').each(function(i,v){ $(this).click(function(){ //有值且不是上一次的頁碼時才調(diào)用 if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){ goPage(v.getAttribute('data-page')); } }); }); } //創(chuàng)建數(shù)字按鈕 function createNumBtn(page){ //page是頁面index從0開始,這里的page加減一要注意 var str=''; if(pager.maxCount>pager.numBtnCount*2){//若最大頁碼數(shù)大于等于固定數(shù)字按鈕總數(shù)(pager.numBtnCount*2+1)時 //此頁左邊右邊各pager.numBtnCount個數(shù)字按鈕 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>'; } } /*數(shù)字按鈕總數(shù)小于固定的數(shù)字按鈕總數(shù)pager.numBtnCount*2+1時, 這個分支,可以省略*/ if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){ str=''; if(page<pager.numBtnCount){//此頁左邊頁碼少于固定按鈕數(shù)時 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綁定請求數(shù)據(jù)頁面跳轉(zhuǎn)方法 $('.'+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();//首屏加載一次非數(shù)字按鈕即可 goPage();//請求數(shù)據(jù)頁面跳轉(zhuǎn)滿足條件按鈕點擊都執(zhí)行,首屏默認跳轉(zhuǎn)到currentPage } //調(diào)用 paginationNick({ paginationBox:'pagination-nick',//分頁容器--必填 mainBox:'main-box-nick',//內(nèi)容盒子--必填 numBtnBox:'num-box-nick',//數(shù)字按鈕盒子-- 必填 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>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。