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

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

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

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

结构层只需要一个容器

一、定义分页 方法

rush:js;"> function paginationNick(opt){ //code }

二、参数设置

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

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

rush:js;"> function goPage(btn){ //code }

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

rush:js;"> var obj={other:{},value:[11,22,33,44,55,66,77,88,99,11,0]};

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

pager.data=obj.value;

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

rush:js;"> pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 : pager.data.length / pager.pageCount;

设置当前页码

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);

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

rush:js;"> function createOtherBtn(){ //code }

内容填充

rush:js;"> $('.'+pager.paginationBox).html('');

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

rush:js;"> $('.'+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')); } }); });

五、创建数字按钮

rush:js;"> function createNumBtn(page){ //code }

创建数字按钮区

将数字按钮区分成当前页左右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+='';//此页 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(/<\/button>/ig).length页码少于固定按钮数时 for(var n=0;n'; } str+='';//此页 for(var x=1;x'; } } 　　if(pager.maxCount-page-10;y--){//此页左边　　　　　　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绑定请求数据页面 跳转 方法

rush:js;"> $('.'+pager.numBtnBox+' button').each(function(i,v){ $(this).click(function(){ goPage(v.getAttribute('data-page')); }); });

按钮禁用

rush:js;"> $('.'+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); }

六、首屏加载

rush:js;"> createOtherBtn();//首屏加载一次非数字按钮即可 goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage

七、调用

rush:js;"> 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 --必填 });

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

完整代码：

rush:xhtml;"> <Meta charset="UTF-8"> pagination-nick

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

jquery jquery实现前端分页前端分页