以用户分页为例，先看一下效果，首先是第一页：
下一页或者点击第二页后：
点击尾页后：
效果还可以吧？来看看具体怎么用，首先后台要有一个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：
异步分页 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<10){ for(var i=1;i=10 }else{ //如果当前页小于5，则显示1-9项，且记忆当前项 if(currpagenum<5){ for(var i =1;i=5，且总页数与当前页的差<4 }else if(totalpagenum-currpagenum<4){ for(var i=totalpagenum-8;i=5，则显示围绕当前页的9项，且记忆当前项 }else{ for(var i=currpagenum-4;i