基于jquery的ajax分页控件的简单实现
这段时间内由于工作需要，经常需要做到分页的东西，发现公司的分页控件对ajax分页支持不是很好，因此琢磨着自己做一个简单的出来，下面是整个控件的开发思路，与大家分享
在动手码代码之前，应该规划下代码的结构，应该暴露给调用者怎样的结构，和提供哪些函数。虽然是一个很小的东西，但是良好的结构也是必不可少的。好了，不墨迹了，下面切入正题。
对于一个分页控件来说，首先必须具备的几个必要属性是：
pageSize; //每页最多显示的记录条数 Number pageCount; //符合查询条件的结果的总页数 Number currentPage; //当前页码 Number start; //分页查询时数据库中的起始位置 Number end; //分页查询时数据库中的阶数位置 Number renderTo; //渲染该控件的父容器id string params; //用户自定义的查询参数，Object url; //分页查询的后台URL地址 string callBackMethod; //查询结果的回调函数，用于组织和显示结果 Function
上面就是这个控件所应该具有的属性，其中end可以根据start和pageSize加以计算，pageCount也是可以根据后台查询返回的记录个数和pageSize进行计算的，而start默认是0，currentPage默认是1，因此需要调用者配置的项只有pageSize，renderTo，params，url和callBackMethod。
接下来是控件的函数，按照功能，我们可以把函数划分如下所示：
private function
init //初始化控件配置，创建分页控件dom元素，并渲染在对应的父容器里
bindEvent //绑定创建的dom元素的点击事件响应函数，如上一页，下一页等等
goPage //根据传入的页码数进行ajax分页查询
updatePageArea //根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显
//示在分页区
loadData //ajax拉取数据
在init方法中，通过jquery创建dom元素，并apped到父元素中，用bindEvent函数给控件各按钮绑定点击事件
init方法和bindEvent方法放在AjaxPager的构造方法中，在创建AjaxPager对象的时候，就进行渲染和事件绑定。
updatePageArea函数主要是根据后台返回的总记录数来计算pageCout和更新控件的显示，如总的页数和记录数
loadData 主要是调用jquery的$.ajax方法来远程请求数据，并在回调函数中调用用户配置的回调函数，来执行用户更新数据的操作。
整个AjaxPager的代码如下所示：
function AjaxPager(options){
var defaultOptions = {
renderTo:"",
params:{},
url:"",
currentPage:1,
pageSize:5,
start:0,
end:5,
pageCount:1,
callBackMethod:function(){alert('请指定自己的回调方法');}
}
this.defaultOptions = defaultOptions;
//重置配置项
if(typeof options != "undefined"){
for(var option in options){
this.defaultOptions[option] = options[option];
}
}
//利用闭包得到AJaxPager本身的this
/**/
var that = this;
getAjaxPagerThis = function(){
return that;
}
this.init();
this.bindEvent();
}
//初始化page模块函数
AjaxPager.prototype.init = function(){
//渲染到指定的div中
if(typeof this.defaultOptions.renderTo != "undefined" && $.trim(this.defaultOptions.renderTo)!=""){
var $renderDiv = $("#"+$.trim(this.defaultOptions.renderTo));
$renderDiv.html("");
$renderDiv.append($("<a href='javascript:void(0)' id='totalCount' style=\"color: #000080; text-decoration:none;\">共0条记录</a><span> </span>"));
$renderDiv.append($("<a href='javascript:void(0)' id='topPage' style=\"color: #000080; text-decoration:none;\">首页</a><span> </span>"));
$renderDiv.append($("<a href='javascript:void(0)' id='prevPage' style=\"color: #000080; text-decoration:none;\">上一页</a><span> </span>"));
$renderDiv.append($("<a href='javascript:void(0)' id='nextPage' style=\"color: #000080; text-decoration:none;\">下一页</a><span> </span>"));
$renderDiv.append($("<a href='javascript:void(0)' id='endPage' style=\"color: #000080; text-decoration:none;\">末页</a><span> </span>"));
$renderDiv.append($("<span>跳转到</span>"));
$renderDiv.append($("<input type=\"text\" size=\"2\" id=\"pageIndex\" />"));
$renderDiv.append($("<span>页</span><span> </span>"));
$renderDiv.append($("<span style=\"font-size: 14px\"><span id=\"pageSpan\">(0/0)</span></span><span> </span>"));
$renderDiv.append($("<input id=\"go\" type=\"button\" value=\"GO\" />"));
}
}
//到第几页
AjaxPager.prototype.goPage = function(pageIndex){
pageIndex = $.trim(pageIndex);
if(typeof pageIndex =="undefined" || pageIndex==""||pageIndex==null)
return;
if(isNaN(pageIndex) || pageIndex<=0){
alert('页码不合法');
return;
}
if(pageIndex>=this.defaultOptions.pageCount)
pageIndex = this.defaultOptions.pageCount;
if(pageIndex<=1)
pageIndex = 1;
this.defaultOptions.start = (pageIndex-1)*this.defaultOptions.pageSize;
this.defaultOptions.end = pageIndex*this.defaultOptions.pageSize;
this.defaultOptions.currentPage = pageIndex;
this.loadData(this);
}
AjaxPager.prototype.topPage = function(){
getAjaxPagerThis().defaultOptions.currentPage = 1;
getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}
AjaxPager.prototype.endPage = function(){
getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount;
getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}
AjaxPager.prototype.prevPage = function(){
if(getAjaxPagerThis().defaultOptions.currentPage<=1)
getAjaxPagerThis().defaultOptions.currentPage = 1;
getAjaxPagerThis().defaultOptions.start = (getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize<0?0:(getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize;
getAjaxPagerThis().defaultOptions.end = (getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize==0?getAjaxPagerThis().defaultOptions.pageSize:(getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize;
getAjaxPagerThis().defaultOptions.currentPage==1?1:getAjaxPagerThis().defaultOptions.currentPage--;
getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}
AjaxPager.prototype.nextPage = function(){
if(getAjaxPagerThis().defaultOptions.currentPage>=getAjaxPagerThis().defaultOptions.pageCount)
getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount-1;
getAjaxPagerThis().defaultOptions.start = getAjaxPagerThis().defaultOptions.currentPage*getAjaxPagerThis().defaultOptions.pageSize;
getAjaxPagerThis().defaultOptions.end = (parseInt(getAjaxPagerThis().defaultOptions.currentPage)+parseInt(1))*getAjaxPagerThis().defaultOptions.pageSize;
getAjaxPagerThis().defaultOptions.currentPage++;
getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);
}
//数字跳转
AjaxPager.prototype.jumpPage = function(){
var pageIndex = $.trim($("#pageIndex").val());
getAjaxPagerThis().goPage(pageIndex);
}
//根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显示在分页区
AjaxPager.prototype.updatePageArea = function(totalCount){
if(typeof(totalCount)!='undefined' ){
if(parseInt(totalCount%this.defaultOptions.pageSize)==0){
this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize);
}else{
this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize)+1;
}
var tempHtml ="";
if(this.defaultOptions.pageCount==0){
tempHtml = "("+0+"/"+this.defaultOptions.pageCount+")";
}else{
tempHtml = "("+this.defaultOptions.currentPage+"/"+this.defaultOptions.pageCount+")";
}
$("#pageSpan").html(tempHtml);
$("#pageIndex").val(this.defaultOptions.currentPage);
if(totalCount==0)
$("#totalCount").html("共0条记录");
else
$("#totalCount").html("共"+totalCount+"条记录");
}
else{
alert('记录总数不存在');
return ;
}
}
//ajax拉取数据函数
AjaxPager.prototype.loadData = function(){
this.defaultOptions.params.start = this.defaultOptions.start;
this.defaultOptions.params.end = this.defaultOptions.end;
$.ajax({
url:this.defaultOptions.url,
data:this.defaultOptions.params,
type:"POST",
contentType:"application/x-www-form-urlencoded;charset=utf-8",
dataType:"json",
async:false,
//调用失败
error:function(e){
alert("远程请求失败");
},
//成功回调函数
success:function(data){
getAjaxPagerThis().defaultOptions.callBackMethod(data);
}
});
}
AjaxPager.prototype.bindEvent = function(){
$("#topPage").bind('click',this.topPage);
$("#prevPage").bind('click',this.prevPage);
$("#nextPage").bind('click',this.nextPage);
$("#endPage").bind('click',this.endPage);
$("#go").bind('click',this.jumpPage);
}
调用格式为：
<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="ajaxpager.js" type="text/javascript"></script>
<script>
$(function(){
var pager;
function buildInfo(data){
//数组为空，表示没有查询到数据
if(data.length==0){
var empty_data_info = "<tr><td colspan='5' style='color:red'>查询无数据</td></tr>";
$("#clanInfo tbody" ).html(empty_data_info);
}
else{
var tempHtml = "";
for(var i=0;i<data.listInfo.length;i++){
var temp = $("<tr></tr>");
temp.append ("<td>"+data.listInfo[i].iClanId+"</td>");
temp.append ("<td>"+data.listInfo[i].sClanName+"</td>");
temp.append ("<td>"+data.listInfo[i].iArea+"</td>");
temp.append ("<td>"+data.listInfo[i].iLeaderUin+"</td>");
temp.append ("<td><a href='#' onclick='WozClanManager.ClanInfoManager.resetPwd("+data.listInfo[i].iClanId+");'>重置二级密码</a></td>");
tempHtml +="<tr>"+temp.html()+"</tr>";
}
$("#clanInfo tbody" ).html(tempHtml);
pager.updatePageArea(data.totalCount);
}
}
$("#searchBtn").click(function(){
pager = new AjaxPager({
renderTo:'ajaxpage',
url:"http://gavin.qq.com/admin/admin.php",
params:{
'action':'queryClanInfo',
'sClanName':$("#sClanName").val(),
'iClanId':$("#iClanId").val()
},
callBackMethod:buildInfo
});
pager.topPage();
});
});
</script>
在上面的代码中，pager.updatePageArea(data.totalCount);这个函数本来想放到控件中的loadData函数的回调函数执行的，但是如果这样做，就必须约定后台返回的json数组的格式了，失去了灵活性，所以就暂时提供给调用者自己去更新总的页数，所以这里封装得不是很彻底，希望大家指点下我更好的解决方法。
需要注意的问题：
在整个开发中，我遇到了一个关于函数调用作用域的问题，即"this"的问题，在topPage等方法中，我们直接使用this.defaultOptions已经得不到AjaxPaer的配置项了，这是因为在topPage函数中，this已经变成了绑定该函数的dom元素，如果我们需要在topPage函数中使用AjaxPager的this，那么就需要在AjaxPager的构造方法中定一个全局的函数，来返回AjaxPager的this，即利用闭包来实现。
ps：javascript的闭包和原型链这些概念感觉比较模糊，还需要更加深入的学习和了解