建站
咨詢
售后
建站咨詢
新聞中心
分頁(yè)場(chǎng)景常見(jiàn)于電商網(wǎng)站，比如說(shuō)淘寶天貓的評(píng)論區(qū)，分頁(yè)功能一般是后臺(tái)實(shí)現(xiàn)，前端請(qǐng)求就完事了。現(xiàn)閑得無(wú)聊，就寫(xiě)出來(lái)玩玩，只實(shí)現(xiàn)功能，并未封裝。
成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站重做改版、昌樂(lè)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為昌樂(lè)等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
基于jq實(shí)現(xiàn)分頁(yè)功能，大致分為以下幾步：
- 定義一個(gè)分頁(yè)方法，可多次調(diào)用
- 參數(shù)設(shè)置
- 請(qǐng)求數(shù)據(jù)頁(yè)面跳轉(zhuǎn)方法
- 創(chuàng)建非數(shù)字按鈕和數(shù)據(jù)內(nèi)容區(qū)
- 創(chuàng)建數(shù)字按鈕
- 首屏加載
- 調(diào)用
結(jié)構(gòu)層只需要一個(gè)容器
一、定義分頁(yè)方法
function paginationNick(opt){
//code
}二、參數(shù)設(shè)置
幾個(gè)必填的容器class，和幾個(gè)可以修改的默認(rèn)數(shù)據(jù)參數(shù)
var pager={
paginationBox:'',//分頁(yè)容器-- 必填
mainBox:'',//內(nèi)容盒子--必填
numBtnBox:'',//數(shù)字按鈕盒子-- 必填
btnBox:'',//按鈕盒子 --必填
ipt:'',//input class-- 必填
goBtn:'',//go btn class --必填
currentBtn:'',//當(dāng)前按鈕class name --必填
pageCount:5,//每頁(yè)顯示幾條數(shù)據(jù)
numBtnCount:3,//當(dāng)前頁(yè)左右兩邊各多少個(gè)數(shù)字按鈕
currentPage:0,//當(dāng)前頁(yè)碼data-page，首屏默認(rèn)值
maxCount:0,//ajax請(qǐng)求數(shù)據(jù)分成的最大頁(yè)碼
data:[]//ajax請(qǐng)求的數(shù)據(jù)
};
pager = $.extend(pager,opt);三、請(qǐng)求數(shù)據(jù)頁(yè)面跳轉(zhuǎn)方法
創(chuàng)建所有的按鈕時(shí)都用了自定義屬性data-page保留要跳轉(zhuǎn)的頁(yè)碼信息，調(diào)用時(shí)將此屬性作為參數(shù)用于跳轉(zhuǎn)頁(yè)面判斷。
function goPage(btn){
//code
}obj為ajax請(qǐng)求數(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請(qǐng)求數(shù)據(jù)分成的最大頁(yè)碼
pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount;
設(shè)置當(dāng)前頁(yè)碼
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創(chuàng)建數(shù)字按鈕
createNumBtn(pager.currentPage);
賦值給頁(yè)碼跳轉(zhuǎn)輸入框的value，表示當(dāng)前頁(yè)碼
$('.'+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+=''+v+'';
});
$('.'+pager.mainBox).html(str);四、創(chuàng)建非數(shù)字按鈕和數(shù)據(jù)內(nèi)容區(qū)
function createOtherBtn(){
//code
}內(nèi)容填充
$('.'+pager.paginationBox).html('');監(jiān)聽(tīng)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)尾頁(yè)
$(this).val(pager.maxCount);
}
if($(this).val()<1){//限制value最小值，跳轉(zhuǎn)首頁(yè)
$(this).val(1);
}
}else{//非數(shù)字清空value
$(this).val('');
}
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
});每個(gè)btn綁定請(qǐng)求數(shù)據(jù)頁(yè)面跳轉(zhuǎn)方法
$('.'+pager.btnBox+' button').each(function(i,v){
$(this).click(function(){
//有值且不是上一次的頁(yè)碼時(shí)才調(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ū)分成當(dāng)前頁(yè)左右2邊分析，需要注意的地方都加注釋了
var str='';
if(pager.maxCount>pager.numBtnCount*2){//若最大頁(yè)碼數(shù)大于等于固定數(shù)字按鈕總數(shù)（pager.numBtnCount*2+1）時(shí)
//此頁(yè)左邊右邊各pager.numBtnCount個(gè)數(shù)字按鈕
if(page-pager.numBtnCount>-1){//此頁(yè)左邊有pager.numBtnCount頁(yè) page頁(yè)碼從0開(kāi)始
for(var m=pager.numBtnCount;m>0;m--){
str+='';
}
}else{
for(var k=0;k'+(k+1)+'';
}
}
str+='';//此頁(yè)
if(pager.maxCount-page>3){//此頁(yè)右邊有pager.numBtnCount頁(yè) page頁(yè)碼從0開(kāi)始
for(var j=1;j'+(page+j+1)+'';
}
}else{
for(var i=page+1;i'+(i+1)+'';
}
}
/*數(shù)字按鈕總數(shù)小于固定的數(shù)字按鈕總數(shù)pager.numBtnCount*2+1時(shí)，
這個(gè)分支，可以省略*/
if(str.match(/<\/button>/ig).length'+(n+1)+'';
}
str+='';//此頁(yè)
for(var x=1;x'+(page+x+1)+'';
}
}
if(pager.maxCount-page-10;y--){//此頁(yè)左邊
str+='';
}
str+='';//此頁(yè)
for(var z=page+1;z'+(z+1)+'';
}
}
}
}else{
str='';
for(var n=0;n'+(n+1)+'';
}
str+='';//此頁(yè)
for(var x=1;x'+(page+x+1)+'';
}
}
$('.'+pager.numBtnBox).html(str); 每個(gè)btn綁定請(qǐng)求數(shù)據(jù)頁(yè)面跳轉(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){//首頁(yè)時(shí) $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
$('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
}
if(page==pager.maxCount-1){//尾頁(yè)時(shí)
$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
$('.'+pager.btnBox+' .next-btn').attr('disabled',true);
}六、首屏加載
createOtherBtn();//首屏加載一次非數(shù)字按鈕即可 goPage();//請(qǐng)求數(shù)據(jù)頁(yè)面跳轉(zhuǎn)滿足條件按鈕點(diǎn)擊都執(zhí)行，首屏默認(rèn)跳轉(zhuǎn)到currentPage
七、調(diào)用
paginationNick({
paginationBox:'pagination-nick',//分頁(yè)容器--必填
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'//當(dāng)前按鈕class name --必填
});需要注意的地方，注釋都加上了！
完整代碼：
pagination-nick
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
標(biāo)題名稱：前端分頁(yè)功能的實(shí)現(xiàn)以及原理（jQuery）
鏈接地址：http://www.ef60e0e.cn/article/jhgseo.html
