前端分页功能的实现以及原理（jQuery）
分页场景常见于电商⽹站，⽐如说淘宝天猫的评论区，分页功能⼀般是后台实现，前端请求就完事了。现闲得⽆聊，就写出来玩玩，只实现功能，并未封装。基于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.pageCo
unt) +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=监听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+' .'+Btn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
});
每个btn绑定请求数据页⾯跳转⽅法
$('.'+pager.btnBox+' button').each(function(i,v){
$(this).click(function(){
//有值且不是上⼀次的页码时才调⽤
Attribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
Attribute('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(){
Attribute('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="apps.bdimg/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)
jquery的attr属性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 //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+' .'+Btn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
});
//每个btn绑定请求数据页⾯跳转⽅法
$('.'+pager.btnBox+' button').each(function(i,v){
$(this).click(function(){
//有值且不是上⼀次的页码时才调⽤
Attribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
Attribute('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(){
Attribute('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>
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论