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

2024-03-01 21:28:03 368

分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现，前端请求就完事了。现闲得无聊，就写出来玩玩，只实现功能，并未封装。

基于jq实现分页功能，大致分为以下几步：

定义一个分页方法，可多次调用
参数设置
请求数据页面跳转方法
创建非数字按钮和数据内容区
创建数字按钮
首屏加载
调用

结构层只需要一个容器

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

一、定义分页方法

functionpaginationNick(opt){
//code
}

二、参数设置

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

varpager={
paginationBox:'',//分页容器--必填
mainBox:'',//内容盒子--必填
numBtnBox:'',//数字按钮盒子--必填
btnBox:'',//按钮盒子--必填
ipt:'',//inputclass--必填
goBtn:'',//gobtnclass--必填
currentBtn:'',//当前按钮classname--必填
pageCount:5,//每页显示几条数据
numBtnCount:3,//当前页左右两边各多少个数字按钮
currentPage:0,//当前页码data-page，首屏默认值
maxCount:0,//ajax请求数据分成的最大页码
data:[]//ajax请求的数据
};
pager=$.extend(pager,opt);

三、请求数据页面跳转方法

创建所有的按钮时都用了自定义属性data-page保留要跳转的页码信息，调用时将此属性作为参数用于跳转页面判断。

functiongoPage(btn){
//code
}

obj为ajax请求数据（用于模拟）

varobj={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);

内容区填充数据

vararr=[],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);

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

functioncreateOtherBtn(){
//code
}

内容填充

$('.'+pager.paginationBox).html('<divclass="'+pager.btnBox+'"><buttondata-page="first"class="first-btn">首页</button><buttondata-page="prev"class="prev-btn">上一页</button><spanclass="'+pager.numBtnBox+'"></span><buttondata-page="next"class="next-btn">下一页</button><inputtype="text"placeholder="请输入页码"class="'+pager.ipt+'"><buttonclass="'+pager.goBtn+'">确定go</button><buttondata-page="last"class="last-btn">尾页</button></div><divclass="'+pager.mainBox+'"></div>');

监听iptvalue变化并赋值给gobtndata-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'));
}
});
});

五、创建数字按钮

functioncreateNumBtn(page){
//code
}

创建数字按钮区

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

varstr='';
if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
//此页左边右边各pager.numBtnCount个数字按钮
if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页page页码从0开始
for(varm=pager.numBtnCount;m>0;m--){
str+='<buttondata-page="'+(page-m)+'">'+(page-m+1)+'</button>';
}
}else{
for(vark=0;k<page;k++){
str+='<buttondata-page="'+k+'">'+(k+1)+'</button>';
}
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页page页码从0开始
for(varj=1;j<pager.numBtnCount+1;j++){
str+='<buttondata-page="'+(page+j)+'">'+(page+j+1)+'</button>';
}
}else{
for(vari=page+1;i<pager.maxCount;i++){
str+='<buttondata-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(varn=0;n<page;n++){//此页左边
str+='<buttondata-page="'+n+'">'+(n+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varx=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
str+='<buttondata-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
if(pager.maxCount-page-1<pager.numBtnCount){
for(vary=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
str+='<buttondata-page="'+(page-y)+'">'+(page-y+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varz=page+1;z<pager.maxCount;z++){//此页右边
str+='<buttondata-page="'+z+'">'+(z+1)+'</button>';
}
}
}
}else{
str='';
for(varn=0;n<page;n++){//此页左边
str+='<buttondata-page="'+n+'">'+(n+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varx=1;x<pager.maxCount-page;x++){//此页右边
str+='<buttondata-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',//inputclass--必填
goBtn:'go-btn-nick',//gobtnclass--必填
currentBtn:'active-nick'//当前按钮classname--必填
});

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

完整代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="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>
<divclass="pagination-nick"></div>
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//定义一个分页方法，可多次调用
functionpaginationNick(opt){
//参数设置
varpager={
paginationBox:'',//分页容器--必填
mainBox:'',//内容盒子--必填
numBtnBox:'',//数字按钮盒子--必填
btnBox:'',//按钮盒子--必填
ipt:'',//inputclass--必填
goBtn:'',//gobtnclass--必填
currentBtn:'',//当前按钮classname--必填
pageCount:5,//每页显示几条数据
numBtnCount:3,//当前页左右两边各多少个数字按钮
currentPage:0,//当前页码data-page，首屏默认值
maxCount:0,//ajax请求数据分成的最大页码
data:[]//ajax请求的数据
};
pager=$.extend(pager,opt);
//请求数据页面跳转方法
functiongoPage(btn){
//obj为ajax请求数据
varobj={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);
//内容区填充数据
vararr=[],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);
}
//创建非数字按钮和数据内容区
functioncreateOtherBtn(){
$('.'+pager.paginationBox).html('<divclass="'+pager.btnBox+'"><buttondata-page="first"class="first-btn">首页</button><buttondata-page="prev"class="prev-btn">上一页</button><spanclass="'+pager.numBtnBox+'"></span><buttondata-page="next"class="next-btn">下一页</button><inputtype="text"placeholder="请输入页码"class="'+pager.ipt+'"><buttonclass="'+pager.goBtn+'">确定go</button><buttondata-page="last"class="last-btn">尾页</button></div><divclass="'+pager.mainBox+'"></div>');
//iptvalue变化并赋值给gobtndata-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'));
}
});
});
}
//创建数字按钮
functioncreateNumBtn(page){
//page是页面index从0开始，这里的page加减一要注意
varstr='';
if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
//此页左边右边各pager.numBtnCount个数字按钮
if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页page页码从0开始
for(varm=pager.numBtnCount;m>0;m--){
str+='<buttondata-page="'+(page-m)+'">'+(page-m+1)+'</button>';
}
}else{
for(vark=0;k<page;k++){
str+='<buttondata-page="'+k+'">'+(k+1)+'</button>';
}
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页page页码从0开始
for(varj=1;j<pager.numBtnCount+1;j++){
str+='<buttondata-page="'+(page+j)+'">'+(page+j+1)+'</button>';
}
}else{
for(vari=page+1;i<pager.maxCount;i++){
str+='<buttondata-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(varn=0;n<page;n++){//此页左边
str+='<buttondata-page="'+n+'">'+(n+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varx=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
str+='<buttondata-page="'+(page+x)+'">'+(page+x+1)+'</button>';
}
}
if(pager.maxCount-page-1<pager.numBtnCount){
for(vary=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
str+='<buttondata-page="'+(page-y)+'">'+(page-y+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varz=page+1;z<pager.maxCount;z++){//此页右边
str+='<buttondata-page="'+z+'">'+(z+1)+'</button>';
}
}
}
}else{
str='';
for(varn=0;n<page;n++){//此页左边
str+='<buttondata-page="'+n+'">'+(n+1)+'</button>';
}
str+='<buttondata-page="'+page+'"class="'+pager.currentBtn+'"disabled="disabled">'+(page+1)+'</button>';//此页
for(varx=1;x<pager.maxCount-page;x++){//此页右边
str+='<buttondata-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',//inputclass--必填
goBtn:'go-btn-nick',//gobtnclass--必填
currentBtn:'active-nick'//当前按钮classname--必填
});
</script>
</body>
</html>

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

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

热门推荐

随机推荐