编程 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 相关文章推荐

JavaScript 函数式编程的原理

Oct 16 Javascript

13 个JavaScript 性能提升技巧分享

Jul 26 Javascript

浅谈Jquery核心函数

Jun 18 Javascript

jQuery插件简单实现方法

Jul 18 Javascript

深入浅析AngularJS中的module(模块)

Jan 04 Javascript

理解Javascript文件动态加载

Jan 29 Javascript

BootStrap的JS插件之轮播效果案例详解

May 16 Javascript

详解Vue2.0之去掉组件click事件的native修饰

Apr 20 Javascript

javascript异步编程的六种方式总结

May 17 Javascript

vue-router二级导航切换路由及高亮显示的实现方法

Jul 10 Javascript

js实现指定时间倒计时效果

Aug 26 Javascript

详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程

Apr 27 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