ajax前端分页原理,前端分页功能的实现以及原理（jQuery）

一、定义分页方法

二、参数设置

几个必填的容器class，和几个可以修改的默认数据参数

Box:'',//分页容器-- 必填

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保留要跳转的页码信息，调用时将此属性作为参数用于@R_870_404@面判断。

obj为ajax请求数据(用于模拟)

将展示的数据赋值给pager.data (array)

pager.data=obj.value;

设置ajax请求数据分成的最大页码

设置当前页码

0){

--pager.currentPage;

}

break;

case 'next':

if(pager.currentPage+1

创建数字按钮

createNumBtn(pager.currentPage);

赋值给页码跳转输入框的value，表示当前页码

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

内容区填充数据

-1 ?

pager.pageCount*(pager.currentPage+1) : pager.data.length);

arr.forEach(function(v){

str+='

'+v+'';

});

$('.'+pager.mainBox).html(str);

四、创建非数字按钮和数据内容区

内容填充

Box).html('

Box+'">首页上一页Box+'">下一页页码" class="'+pager.ipt+'">

Box+'">');

监听ipt value变化并赋值给go btn data-page

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绑定请求数据页面跳转方法

Box+' button').each(function(i,v){

$(this).click(function(){

//有值且不是上一次的页码时才调用

if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){

goPage(v.getAttribute('data-page'));

}

});

});

五、创建数字按钮

创建数字按钮区

将数字按钮区分成当前页左右2边分析，需要注意的地方都加注释了

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+='';

}

}else{

for(var k=0;k';

}

}

str+='';//此页

if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始

for(var j=1;j';

}

}else{

for(var i=page+1;i';

}

}

/*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，

这个分支，可以省略*/

if(str.match(//ig).length页码少于固定按钮数时

for(var n=0;n';

}

str+='';//此页

for(var x=1;x';

}

}

if(pager.maxCount-page-10;y--){//此页左边

str+='';

}

str+='';//此页

for(var z=page+1;z';

}

}

}

}else{

str='';

for(var n=0;n';

}

str+='';//此页

for(var x=1;x';

}

}

$('.'+pager.numBtnBox).html(str);

每个btn绑定请求数据页面跳转方法

Box+' button').each(function(i,v){

$(this).click(function(){

goPage(v.getAttribute('data-page'));

});

});

按钮禁用

Box+' 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);

}

六、首屏加载

页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage

七、调用

Box:'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 --必填

});

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

完整代码：

pagination-nick

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。