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

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

程序员文章站 2022-03-11 09:01:30
...
写了一个Jquery异步分页插件,拿出来分享一下,有不完善之处请指教。
以用户分页为例,先看一下效果,首先是第一页:

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

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

利用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()

然后看list_user.jsp:

 
 
 
  
 异步分页
ID 用户名 性别 年龄 Email 地址 注册时间 操作

可以看到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("
"+page.getTotalPageNum()+""+page.getTotalRowSize()+"条记录
"); settings.pageWidget.append("
    "); /* --------------- 1.结束:构建描述信息(如“共?页,?条记录”) ----------------- */ /* --------------- 2.开始:构建“首页”和“上一页”控件 ------------- */ var currPageNum = Number(page.getCurrPageNum()); var totalPageNum = Number(page.getTotalPageNum()); if(currPageNum==1){ //如果你希望当前页是第一页的时候,也允许“首页”和“上一页”控件出现,则可以在这里进行补充 }else{ settings.pageWidget.find("ul").append("
  • 首页
  • "); settings.pageWidget.find("ul").append("
  • 上一页
  • "); } /* --------------- 2.结束:构建“首页”和“上一页”控件 ------------- */ /* --------------- 3.开始:构建分页数字控件 -------------- */ if(totalPageNum"+i+""); }else{ settings.pageWidget.find("ul").append("
  • "+i+"
  • "); } } //如果总页数>=10 }else{ //如果当前页小于5,则显示1-9项,且记忆当前项 if(currPageNum"+i+""); }else{ settings.pageWidget.find("ul").append("
  • "+i+"
  • "); } } //如果当前页>=5,且总页数与当前页的差"+i+""); }else{ settings.pageWidget.find("ul").append("
  • "+i+"
  • "); } } //如果当前页>=5,则显示围绕当前页的9项,且记忆当前项 }else{ for(var i=currPageNum-4;i"+i+""); }else{ settings.pageWidget.find("ul").append("
  • "+i+"
  • "); } } } } /* --------------- 3.结束:构建分页数字控件 -------------- */ /* --------------- 4.开始:构建“下一页”和“尾页”控件 ------------- */ if(totalPageNum==currPageNum){ //如果你希望当前页是最后一页的时候,也允许“尾页”和“下一页”控件出现,则可以在这里进行补充 }else{ settings.pageWidget.find("ul").append("
  • 下一页
  • "); settings.pageWidget.find("ul").append("
  • 尾页
  • "); } /* --------------- 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()

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