分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现，前端请求就完事了。现闲得无聊，就写出来玩玩，只实现功能，并未封装。
基于jq实现分页功能，大致分为以下几步：- 定义一个分页方法，可多次调用
- 参数设置
- 请求数据页面跳转方法
- 创建非数字按钮和数据内容区
- 创建数字按钮
- 首屏加载
- 调用
结构层只需要一个容器<div class="pagination-nick"></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 class=""+pager.btnBox+""><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class=""+pager.numBtnBox+""></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class=""+pager.ipt+""><button class=""+pager.goBtn+"">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class=""+pager.mainBox+""></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边分析，需要注意的地方都加注释了
var str="";if（pager.maxCount>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+="<button data-page=""+（page-m）+"">"+（page-m+1）+"</button>"; } }else{ for（var k=0;k<page;k++）{str+="<button data-page=""+k+"">"+（k+1）+"</button>"; } } str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页 if（pager.maxCount-page>3）{//此页右边有pager.numBtnCount页 page页码从0开始 for（var j=1;j<pager.numBtnCount+1;j++）{str+="<button data-page=""+（page+j）+"">"+（page+j+1）+"</button>"; } }else{ for（var i=page+1;i<pager.maxCount;i++）{str+="<button data-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（var n=0;n<page;n++）{//此页左边 str+="<button data-page=""+n+"">"+（n+1）+"</button>";}str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页for（var x=1;x<pager.numBtnCount*2+1-page;x++）{//此页右边 str+="<button data-page=""+（page+x）+"">"+（page+x+1）+"</button>";} } if（pager.maxCount-page-1<pager.numBtnCount）{ for（var y=pager.numBtnCount*2-（pager.maxCount-page-1）;y>0;y--）{//此页左边 str+="<button data-page=""+（page-y）+"">"+（page-y+1）+"</button>";}str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页for（var z=page+1;z<pager.maxCount;z++）{//此页右边 str+="<button data-page=""+z+"">"+（z+1）+"</button>";} } }}else{ str=""; for（var n=0;n<page;n++）{//此页左边 str+="<button data-page=""+n+"">"+（n+1）+"</button>"; }str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页 for（var x=1;x<pager.maxCount-page;x++）{//此页右边 str+="<button data-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",//input class-- 必填goBtn:"go-btn-nick",//go btn class --必填currentBtn:"active-nick"//当前按钮class name --必填 }）;需要注意的地方，注释都加上了！
完整代码：<！DOCTYPE html><html><head> <meta charset="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> <div class="pagination-nick"></div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script>// 定义一个分页方法，可多次调用 function paginationNick（opt）{//参数设置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）;//请求数据页面跳转方法function goPage（btn）{//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（）{$（"."+pager.paginationBox）.html（"<div class=""+pager.btnBox+""><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class=""+pager.numBtnBox+""></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class=""+pager.ipt+""><button class=""+pager.goBtn+"">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class=""+pager.mainBox+""></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）{//page是页面index从0开始，这里的page加减一要注意var str="";if（pager.maxCount>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+="<button data-page=""+（page-m）+"">"+（page-m+1）+"</button>"; } }else{ for（var k=0;k<page;k++）{str+="<button data-page=""+k+"">"+（k+1）+"</button>"; } } str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页 if（pager.maxCount-page>3）{//此页右边有pager.numBtnCount页 page页码从0开始 for（var j=1;j<pager.numBtnCount+1;j++）{str+="<button data-page=""+（page+j）+"">"+（page+j+1）+"</button>"; } }else{ for（var i=page+1;i<pager.maxCount;i++）{str+="<button data-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（var n=0;n<page;n++）{//此页左边str+="<button data-page=""+n+"">"+（n+1）+"</button>";}str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页for（var x=1;x<pager.numBtnCount*2+1-page;x++）{//此页右边str+="<button data-page=""+（page+x）+"">"+（page+x+1）+"</button>";} } if（pager.maxCount-page-1<pager.numBtnCount）{for（var y=pager.numBtnCount*2-（pager.maxCount-page-1）;y>0;y--）{//此页左边str+="<button data-page=""+（page-y）+"">"+（page-y+1）+"</button>";}str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页for（var z=page+1;z<pager.maxCount;z++）{//此页右边str+="<button data-page=""+z+"">"+（z+1）+"</button>";} } }}else{ str=""; for（var n=0;n<page;n++）{//此页左边 str+="<button data-page=""+n+"">"+（n+1）+"</button>"; } str+="<button data-page=""+page+"" class=""+pager.currentBtn+"" disabled="disabled">"+（page+1）+"</button>";//此页 for（var x=1;x<pager.maxCount-page;x++）{//此页右边 str+="<button data-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",//input class-- 必填goBtn:"go-btn-nick",//go btn class --必填currentBtn:"active-nick"//当前按钮class name --必填 }）; </script></body></html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
易网时代-编程资源站