基于jquery的ajax分页控件的简单实现
间内由于工作需要，经常需要做到分页的东西，发现公司的分页控件对ajax分页支持不是很好，因此琢磨着自己做一个简单的出来，下面是整个控件的开发思路，与大家分享
在动手码代码之前，应该规划下代码的结构，应该暴露给调用者怎样的结构，和提供哪些函数。虽然是一个很小的东西，但是良好的结构也是必不可少的。好了，不墨迹了，下面切入正题。
对于一个分页控件来说，首先必须具备的几个必要属性是：
1 pageSize; //每页最多显示的记录条数 Number
2 pageCount; //符合查询条件的结果的总页数 Number
3 currentPage; //当前页码 Number
4 start; //分页查询时数据库中的起始位置 Number
5 end; //分页查询时数据库中的阶数位置 Number
6 renderTo; //渲染该控件的父容器id string
7 params; //用户自定义的查询参数，Object
8 url; //分页查询的后台URL地址 string
9 callBackMethod; //查询结果的回调函数，用于组织和显示结果 Function
上面就是这个控件所应该具有的属性，其中end可以根据start和pageSize加以计算，pageCount也是可以根据后台查询返回的记录个数和pageSize进行计算的，而start默认是0，currentPage默认是1，因此需要调用者配置的项只有pageSize，renderTo，params，url和callBackMethod。
接下来是控件的函数，按照功能，我们可以把函数划分如下所示：
1 private function
2 init //初始化控件配置，创建分页控件dom元素，并渲染在对应的父容器里
3 bindEvent //绑定创建的dom元素的点击事件响应函数，如上一页，下一页等等
4 goPage //根据传入的页码数进行ajax分页查询
5 updatePageArea //根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显
6 //示在分页区
7 loadData //ajax拉取数据
在init方法中，通过jquery创建dom元素，并apped到父元素中，用bindEvent函数给控件各按钮绑定点击事件
init方法和bindEvent方法放在AjaxPager的构造方法中，在创建AjaxPager对象的时候，就进行渲染和事件绑定。
updatePageArea函数主要是根据后台返回的总记录数来计算pageCout和更新控件的显示，如总的页数和记录数
loadData 主要是调用jquery的$.ajax方法来远程请求数据，并在回调函数中调用用户配置的回调函数，来执行用户更新数据的操作。
整个AjaxPager的代码如下所示：
001 function AjaxPager(options){
002 var defaultOptions = {
003 renderTo:"",
004 params:{},
005 url:"",
006 currentPage:1,
007 pageSize:5,
008 start:0,
009 end:5,
010 pageCount:1,
011 callBackMethod:function(){alert('请指定自己的回调方法');}
012 }
013 this.defaultOptions = defaultOptions;
014 //重置配置项
015 if(typeof options != "undefined"){
016 for(var option in options){
017 this.defaultOptions[option] = options[option];
018 }
019 }
020
021 //利用闭包得到AJaxPager本身的this
022 /**/
023 var that = this;
024 getAjaxPagerThis = function(){
025 return that;
026 }
027
028 this.init();
029 this.bindEvent();
030
031
032
033 }
034
035
036 //初始化page模块函数
037 AjaxPager.prototype.init = function(){
038 //渲染到指定的div中
039 if(typeof this.defaultOptions.renderTo != "undefined" && $.trim(this.defaultOptions.renderTo)!=""){
040 var $renderDiv = $("#"+$.trim(this.defaultOptions.renderTo));
041 $renderDiv.html("");
042 $renderDiv.append($("<a href='javascript:void(0)' id='totalCount' style=\"color: #000080; text-decoration:none;\">共0条记录</a><span> </span>"));
043 $renderDiv.append($("<a href='javascript:void(0)' id='topPage' style=\"color: #000080; text-decoration:none;\">首页</a><span> </span>"));
044 $renderDiv.append($("<a href='javascript:void(0)' id='prevPage' style=\"color: #000080; text-decoration:none;\">上一页</a><span> </span>"));
045 $renderDiv.append($("<a href='javascript:void(0)' id='nextPage' style=\"color: #000080; text-decoration:none;\">下一页</a><span> </span>"));
046 $renderDiv.append($("<a href='javascript:void(0)' id='endPage' style=\"color: #000080; text-decoration:none;\">末页</a><span> </span>"));
047 $renderDiv.append($("<span>跳转到</span>"));
048 $renderDiv.append($("<input type=\"text\" size=\"2\" id=\"pageIndex\" />"));
049 $renderDiv.append($("<span>页</span><span> </span>"));
050 $renderDiv.append($("<span style=\"font-size: 14px\"><span id=\"pageSpan\">(0/0)</span></span><span> </span>"));
051 $renderDiv.append($("<input id=\"go\" type=\"button\" value=\"GO\" />"));
052 }
053 }
054
055 //到第几页
056 AjaxPager.prototype.goPage = function(pageIndex){
057 pageIndex = $.trim(pageIndex);
补充：web前端 , JavaScript ,
