欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-31 18:19:40
分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了。现闲得无聊,就写出来玩玩,只实现功能,并未封装。 基于jq实现分页功能,大致分为...

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

基于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>

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