编程 Javascript

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

Posted in Javascript onMarch 07, 2016

写了一个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 相关文章推荐

aspx中利用js实现确认删除代码

Jul 22 Javascript

json数据的列循环示例

Sep 06 Javascript

jQuery提示效果代码分享

Nov 20 Javascript

基于jQuery全屏焦点图左右切换插件responsiveslides

Sep 07 Javascript

javascript中闭包概念与用法深入理解

Dec 15 Javascript

jQuery EasyUI 组件加上“清除”功能实例详解

Apr 11 jQuery

微信小程序的日期选择器的实例详解

Sep 29 Javascript

webpack打包react项目的实现方法

Jun 21 Javascript

LayUI数据接口返回实体封装的例子

Sep 12 Javascript

vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

May 19 Javascript

使用Vue Composition API写出清晰、可扩展的表单实现

Jun 10 Javascript

JS前端使用Canvas快速实现手势解锁特效

Sep 23 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