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


Posted in Javascript onJanuary 22, 2017

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

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

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

Javascript 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
javascript 构建模块化开发过程解析
Sep 11 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
基于canvasJS在PHP中制作动态图表
May 30 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
loading动画特效小结
Jan 22 #Javascript
You might like
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
jquery easyui使用心得
2014/07/07 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
浅析python中的del用法
2020/09/02 Python
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
2014年学校领导班子对照检查材料
2014/09/19 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电