写了一个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"%>异步分页
| ID | 用户名 | 性别 | 年龄 | 地址 | 注册时间 | 操作 |
|---|
可以看到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<=totalPageNum;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("
- "+i+" "); }else{ settings.pageWidget.find("ul").append("
- "+i+" "); } } //如果总页数>=10 }else{ //如果当前页小于5，则显示1-9项，且记忆当前项 if(currPageNum<5){ for(var i =1;i<10;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("
- "+i+" "); }else{ settings.pageWidget.find("ul").append("
- "+i+" "); } } //如果当前页>=5，且总页数与当前页的差<4 }else if(totalPageNum-currPageNum<4){ for(var i=totalPageNum-8;i<=totalPageNum;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("
- "+i+" "); }else{ settings.pageWidget.find("ul").append("
- "+i+" "); } } //如果当前页>=5，则显示围绕当前页的9项，且记忆当前项 }else{ for(var i=currPageNum-4;i
- "+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()<=0) return 0; return this.getPageRowSize() * (this.getCurrPageNum() - 1); }; Page.prototype.getMaxResult = function(){ return this.getFirstResult() + this.getPageRowSize(); };
以上就是本文的全部内容，希望对大家的学习有所帮助。
