前端分页功能的实现以及原理(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获得鼠标的坐标值的方法
Mar 13 Javascript
angularJS中router的使用指南
Feb 09 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
Json解析的方法小结
Jun 22 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
js实现星星海特效的示例
Sep 28 Javascript
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
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
.net C#面试题
2012/08/28 面试题
总经理职责范文
2013/11/08 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
商场促销活动方案
2014/02/08 职场文书
社团活动总结范文
2014/04/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书