首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用JQuery写一个简单的异步分页插件

Posted in Javascript onMarch 07, 2016

写了一个Jquery异步分页插件，拿出来分享一下，有不完善之处请指教。
以用户分页为例，先看一下效果，首先是第一页：

利用JQuery写一个简单的异步分页插件

下一页或者点击第二页后：

利用JQuery写一个简单的异步分页插件

点击尾页后：

利用JQuery写一个简单的异步分页插件

效果还可以吧？来看看具体怎么用，首先后台要有一个Page模型：
Page.java：

public class Page { 
  
 /** 
  * 当前页号 
  */ 
 private int currPageNum = 1; 
  
  
 /** 
  * 总记录数 
  */ 
 private int totalRowSize = 0; 
  
 /** 
  * 每页记录数 
  */ 
 private int pageRowSize = 10; 
  
 public int getCurrPageNum() { 
  return currPageNum; 
 } 
 
 public void setCurrPageNum(int currPageNum) { 
  this.currPageNum = currPageNum; 
 } 
 
 public int getTotalPageNum() { 
  int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1); 
  return total; 
 } 
 
 public int getTotalRowSize() { 
  return totalRowSize; 
 } 
 
 public void setTotalRowSize(int totalRowSize) { 
  this.totalRowSize = totalRowSize; 
 } 
 
 public int getPageRowSize() { 
  return pageRowSize; 
 } 
 
 public void setPageRowSize(int pageRowSize) { 
  this.pageRowSize = pageRowSize; 
 } 
 
 public int getFirstResult(){ 
  if(getCurrPageNum()<=0) return 0; 
   
  return getPageRowSize() * (getCurrPageNum() - 1); 
 } 
 
 public int getMaxResult() { 
  return this.getFirstResult()+this.getPageRowSize(); 
 } 
  
}

然后看list_user.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <title>异步分页</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <link href="../css/local.css" rel="stylesheet" type="text/css" /> 
 <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> 
 <script type="text/javascript" src="../js/asyn_page.js"></script> 
 <script type="text/javascript"> 
 var totalRowSize = ${totalRowSize}; 
 $(document).ready(function(){ 
  $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 
 }); 
  
 //构建内容 
 function buildHtml(users){ 
  $.each(users,function(i,user){ 
   var tr = [ 
    '<tr>', 
     '<td>',user.userId,'</td>', 
     '<td>',user.username,'</td>', 
     '<td>',user.sex,'</td>', 
     '<td>',user.age,'</td>', 
     '<td>',user.email,'</td>', 
     '<td>',user.address,'</td>', 
     '<td>',user.registerTime,'</td>', 
     '<td></td>', 
    '</tr>' 
   ].join(''); 
   $("#tbody").append(tr); 
  }); 
 } 
 </script> 
 </head> 
 <body> 
 <table> 
  <thead> 
  <tr> 
   <th>ID</th> 
   <th>用户名</th> 
   <th>性别</th> 
   <th>年龄</th> 
   <th>Email</th> 
   <th>地址</th> 
   <th>注册时间</th> 
   <th>操作</th> 
  </tr> 
  </thead> 
  <tbody id="tbody"></tbody> 
 </table> 
 <div id="pageWidget" class="page"></div> 
 </body> 
</html>

 可以看到id为tbody的元素是作为分页内容展示容器，id为pageWidget的元素作为分页控件展示容器。
然后提供了一个buildHtml()函数来具体构建分页内容的。
使用异步分页插件很简单，只要这么调用：

$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);

 这是最简化调用。还可以传额外查询参数，以及定制每页显示记录数，具体使用方式见插件的具体介绍。
下面是asynPage插件内容：

/* 
 * ===================AJAX异步分页================= 
 * 
 * Copyright 2012 8 23, zhutx 
 * 
 * 假设id为pageWidget的div是你放置分页控件的容器，则按如下形式调用： 
 * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10}); 
 * 参数说明： 
 * ------------Required----------- 
 * 参数一：请求URL 
 * 参数二：渲染结果集的页面容器 
 * 参数三：负责渲染结果集到页面的函数 
 * 参数四：总记录数 
 * ------------Optional----------- 
 * 参数五(json对象)： 
 * 属性pageRowSize:每页记录数(不配置，则默认为20) 
 * 属性param:请求参数(json格式) 
 */ 
(function($){ 
 var settings; 
 var page; 
 var paramStr; 
  
 $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){ 
  
  settings = $.extend({ 
   currPageNum:1, 
   pageRowSize:20, 
   param:null 
  },callerSettings||{}); 
  
  settings.contentContainer = $(contentContainer); 
  settings.url = url; 
  settings.pageWidget = this; 
  settings.totalRowSize = totalRowSize; 
  settings.buildHtml_fun = buildHtml_fun; 
   
  page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize); 
   
  paramStr = makeParamStr(settings.param); 
   
  //开始获取数据 
  fetchData(page.getCurrPageNum()); 
   
  return this; 
 }; 
  
 /* 将json转换为请求参数字符串 */ 
 var trunParamConfig2RequestParamStr = function(json){ 
  var str = ""; 
  for(key in json){ 
   if(str==""){ 
    str += key+"="+json[key]; 
   }else{ 
    str += "&"+key+"="+json[key]; 
   } 
  } 
  return str; 
 }; 
  
 /* 将配置参数拼接为请求字符串 */ 
 var makeParamStr = function(param_json){ 
  if(param_json==null){ 
   return ""; 
  }else{ 
   return trunParamConfig2RequestParamStr(param_json); 
  } 
 }; 
  
 /* 
  * 负责获取后台数据，获取完毕后会触发构建分页控件 
  */ 
 var fetchData = function(currPageNum){ 
   
  page.setCurrPageNum(currPageNum); 
  var firstResult = page.getFirstResult(); 
  var maxResult = page.getMaxResult(); 
  var pageRowSize = page.getPageRowSize(); 
   
  var data = null; 
  if(paramStr){ 
   data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; 
  }else{ 
   data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; 
  } 
   
  $.ajax({ 
   type :"POST", 
   url : settings.url, 
   data :data, 
   success :function(datas){ 
    settings.contentContainer.empty(); 
    settings.buildHtml_fun(datas); 
    buildPageWidget(page);//触发构建分页控件 
   }, 
   error:function(xmlHttpRequest,textStatus,errorThrown){ 
    if(textStatus == "error"){ 
     var error = eval('('+xmlHttpRequest.responseText+')'); 
     alert("Sorry："+error.errorCode+"，"+error.message+"！"); 
    } 
   } 
  }); 
 }; 
  
 var trunTargetPage = function(pageNum){ 
  fetchData(pageNum); 
 } 
  
 /* 为分页控件绑定事件 */ 
 var bindEvent = function(){ 
  var links = settings.pageWidget.find("a"); 
  $.each(links,function(i,link){ 
   var link = $(link); 
   var pageNum = link.attr("pageNum"); 
   link.click(function(){ 
    trunTargetPage(pageNum); 
   }); 
  }); 
 } 
  
 /* 构建分页控件的具体算法实现 */ 
 var buildPageWidget = function(page){ 
   
  //构建分页控件前，先清理现有控件 
  settings.pageWidget.empty(); 
   
  /* --------------- 下面开始进入真正的分页控件构建过程 -------------- */ 
   
  /* --------------- 1.开始：构建描述信息（如“共？页，？条记录”） ----------------- */ 
  settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>页 <span>"+page.getTotalRowSize()+"</span>条记录</div>"); 
  settings.pageWidget.append("<ul>"); 
  /* --------------- 1.结束：构建描述信息（如“共？页，？条记录”） ----------------- */ 
   
  /* --------------- 2.开始：构建“首页”和“上一页”控件 ------------- */ 
  var currPageNum = Number(page.getCurrPageNum()); 
  var totalPageNum = Number(page.getTotalPageNum()); 
   
  if(currPageNum==1){ 
   //如果你希望当前页是第一页的时候，也允许“首页”和“上一页”控件出现，则可以在这里进行补充 
  }else{ 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首页' class='first'>首页</a></li>"); 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一页' class='prev'>上一页</a></li>"); 
  } 
  /* --------------- 2.结束：构建“首页”和“上一页”控件 ------------- */ 
   
  /* --------------- 3.开始：构建分页数字控件 -------------- */ 
  if(totalPageNum<10){ 
   for(var i=1;i<=totalPageNum;i++){ 
    if(i==currPageNum){ 
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
    }else{ 
     settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>"); 
    } 
   } 
  //如果总页数>=10 
  }else{ 
   //如果当前页小于5，则显示1-9项，且记忆当前项 
   if(currPageNum<5){ 
    for(var i =1;i<10;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   //如果当前页>=5，且总页数与当前页的差<4 
   }else if(totalPageNum-currPageNum<4){ 
    for(var i=totalPageNum-8;i<=totalPageNum;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项  
   }else{ 
    for(var i=currPageNum-4;i<currPageNum+5;i++){ 
     if(i==currPageNum){ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); 
     }else{ 
      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>"); 
     } 
    } 
   } 
  } 
  /* --------------- 3.结束：构建分页数字控件 -------------- */ 
   
  /* --------------- 4.开始：构建“下一页”和“尾页”控件 ------------- */ 
  if(totalPageNum==currPageNum){ 
   //如果你希望当前页是最后一页的时候，也允许“尾页”和“下一页”控件出现，则可以在这里进行补充 
  }else{ 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一页' class='next'>下一页</a></li>"); 
   settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾页' class='last'>尾页</a></li>"); 
  } 
  /* --------------- 4.结束：构建“下一页”和“尾页”控件 ------------- */ 
   
  //还要为控件绑定点击事件 
  bindEvent(); 
 } 
  
})(jQuery); 
 
/* 
 * Page类 
 */ 
function Page(currPageNum,totalRowSize,pageRowSize){ 
 this.currPageNum = currPageNum; 
 this.totalRowSize = totalRowSize; 
 this.pageRowSize = pageRowSize; 
} 
Page.prototype.getCurrPageNum = function(){ 
 return this.currPageNum; 
}; 
Page.prototype.setCurrPageNum = function(currPageNum){ 
 this.currPageNum = currPageNum; 
}; 
Page.prototype.getTotalPageNum = function(){ 
 return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1); 
}; 
Page.prototype.getTotalRowSize = function(){ 
 return this.totalRowSize; 
}; 
Page.prototype.setTotalRowSize = function(totalRowSize){ 
 this.totalRowSize = totalRowSize; 
}; 
Page.prototype.getPageRowSize = function(){ 
 return this.pageRowSize; 
}; 
Page.prototype.setPageRowSize = function(pageRowSize){ 
 this.pageRowSize = pageRowSize; 
}; 
Page.prototype.getFirstResult = function(){ 
 if(this.getCurrPageNum()<=0) return 0; 
 return this.getPageRowSize() * (this.getCurrPageNum() - 1); 
}; 
Page.prototype.getMaxResult = function(){ 
 return this.getFirstResult() + this.getPageRowSize(); 
};

以上就是本文的全部内容，希望对大家的学习有所帮助。

利用JQuery写一个简单的异步分页插件

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
javascript prototype，executing，context，closure
Dec 24 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
基于jquery编写分页插件
Mar 07 #Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 #Javascript
javascript特殊日历控件分享
Mar 07 #Javascript
基于JavaScript实现快速转换文本语言（繁体中文和简体中文）
Mar 07 #Javascript
论JavaScript模块化编程
Mar 07 #Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 #Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 #Javascript
保加利亚购物网站(3) DB面试题(126) 哈萨克斯坦购物网站(2) 冰岛购物网站(1) 白俄罗斯购物网站(3) .NET面试题(131) JAVA面试题(401) PHP面试题(54) Android面试题(6) C++面试题(199)
You might like
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
php与js的区别是什么
2013/08/05 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
搭建vue开发环境
2018/07/19 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Django开发中复选框用法示例
2018/03/20 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
三星俄罗斯授权在线商店：Samsung俄罗斯
2019/09/28 全球购物
override和overload的区别
2016/03/09 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
口腔医学技术应届生求职信
2013/11/09 职场文书
工程部主管岗位职责
2013/11/17 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
婚前协议书怎么写
2014/04/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
资金申请报告范文
2015/05/14 职场文书
离婚律师函范本
2015/05/27 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang