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

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

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

定义一个分页方法,可多次调用

参数设置

请求数据页面跳转方法

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

创建数字按钮

首屏加载

调用

结构层只需要一个容器

<div></div>

一、定义分页方法

function paginationNick(opt){ //code }

二、参数设置

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

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

function goPage(btn){ //code }

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

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]};

将展示的数据赋值给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);

内容区填充数据

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

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

function createOtherBtn(){ //code }

内容填充

$('.'+pager.paginationBox).html('<div><button data-page="first">首页</button><button data-page="prev">上一页</button><span></span><button data-page="next">下一页</button><input type="text" placeholder="请输入页码"><button>确定go</button><button data-page="last">尾页</button></div><div></div>');

监听ipt value变化并赋值给go btn data-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')); } }); });

五、创建数字按钮

function createNumBtn(page){ //code }

创建数字按钮区

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdyjj.html