岁月论坛

当前位置：首页 > 软件开发 > Web开发 > JavaScript

基于jquery的ajax分页控件的简单实现

来源：岁月联盟编辑：exp 时间：2012-08-13

间内由于工作需要，经常需要做到分页的东西，发现公司的分页控件对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);

058 if(typeof pageIndex =="undefined" || pageIndex==""||pageIndex==null)

059 return;

060 if(isNaN(pageIndex) || pageIndex<=0){

061 alert('页码不合法');

062 return;

063 }

064 if(pageIndex>=this.defaultOptions.pageCount)

065 pageIndex = this.defaultOptions.pageCount;

066 if(pageIndex<=1)

067 pageIndex = 1;

068 this.defaultOptions.start = (pageIndex-1)*this.defaultOptions.pageSize;

069 this.defaultOptions.end = pageIndex*this.defaultOptions.pageSize;

070 this.defaultOptions.currentPage = pageIndex;

071 this.loadData(this);

072

073 }

074

075 AjaxPager.prototype.topPage = function(){

076 getAjaxPagerThis().defaultOptions.currentPage = 1;

077 getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);

078 }

079

080

081 AjaxPager.prototype.endPage = function(){

082 getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount;

083 getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);

084 }

085

086 AjaxPager.prototype.prevPage = function(){

087 if(getAjaxPagerThis().defaultOptions.currentPage<=1)

088 getAjaxPagerThis().defaultOptions.currentPage = 1;

089 getAjaxPagerThis().defaultOptions.start = (getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize<0?0:(getAjaxPagerThis().defaultOptions.currentPage-2)*getAjaxPagerThis().defaultOptions.pageSize;

090 getAjaxPagerThis().defaultOptions.end = (getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize==0?getAjaxPagerThis().defaultOptions.pageSize:(getAjaxPagerThis().defaultOptions.currentPage-1)*getAjaxPagerThis().defaultOptions.pageSize;

091 getAjaxPagerThis().defaultOptions.currentPage==1?1:getAjaxPagerThis().defaultOptions.currentPage--;

092 getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);

093 }

094

095 AjaxPager.prototype.nextPage = function(){

096 if(getAjaxPagerThis().defaultOptions.currentPage>=getAjaxPagerThis().defaultOptions.pageCount)

097 getAjaxPagerThis().defaultOptions.currentPage = getAjaxPagerThis().defaultOptions.pageCount-1;

098 getAjaxPagerThis().defaultOptions.start = getAjaxPagerThis().defaultOptions.currentPage*getAjaxPagerThis().defaultOptions.pageSize;

099 getAjaxPagerThis().defaultOptions.end = (parseInt(getAjaxPagerThis().defaultOptions.currentPage)+parseInt(1))*getAjaxPagerThis().defaultOptions.pageSize;

100 getAjaxPagerThis().defaultOptions.currentPage++;

101 getAjaxPagerThis().goPage(getAjaxPagerThis().defaultOptions.currentPage);

102 }

103 //数字跳转

104 AjaxPager.prototype.jumpPage = function(){

105 var pageIndex = $.trim($("#pageIndex").val());

106 getAjaxPagerThis().goPage(pageIndex);

107 }

108 //根据外部传入的记录总数和每页显示条目数来计算需要的总页数，并显示在分页区

109 AjaxPager.prototype.updatePageArea = function(totalCount){

110 if(typeof(totalCount)!='undefined' ){

111 if(parseInt(totalCount%this.defaultOptions.pageSize)==0){

112 this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize);

113 }else{

114 this.defaultOptions.pageCount = parseInt(totalCount/this.defaultOptions.pageSize)+1;

115 }

116 var tempHtml ="";

117 if(this.defaultOptions.pageCount==0){

118 tempHtml = "("+0+"/"+this.defaultOptions.pageCount+")";

119 }else{

120 tempHtml = "("+this.defaultOptions.currentPage+"/"+this.defaultOptions.pageCount+")";

121 }

122 $("#pageSpan").html(tempHtml);

123 $("#pageIndex").val(this.defaultOptions.currentPage);

124 if(totalCount==0)

125 $("#totalCount").html("共0条记录");

126 else

127 $("#totalCount").html("共"+totalCount+"条记录");

128 }

129 else{

130 alert('记录总数不存在');

131 return ;

132 }

133

134

135 }

136 //ajax拉取数据函数

137 AjaxPager.prototype.loadData = function(){

138 this.defaultOptions.params.start = this.defaultOptions.start;

139 this.defaultOptions.params.end = this.defaultOptions.end;

140 $.ajax({

141 url:this.defaultOptions.url,

142 data:this.defaultOptions.params,

143 type:"POST",

144 contentType:"application/x-www-form-urlencoded;charset=utf-8",

145 dataType:"json",

146 async:false,

147 //调用失败

148 error:function(e){

149 alert("远程请求失败");

150 },

151 //成功回调函数

152 success:function(data){

153 getAjaxPagerThis().defaultOptions.callBackMethod(data);

154 }

155 });

156

157 }

158

159 AjaxPager.prototype.bindEvent = function(){

160 $("#topPage").bind('click',this.topPage);

161 $("#prevPage").bind('click',this.prevPage);

162 $("#nextPage").bind('click',this.nextPage);

163 $("#endPage").bind('click',this.endPage);

164 $("#go").bind('click',this.jumpPage);

165 }

调用格式为：

01 <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.5.min.js" type="text/javascript"></script>

02 <script src="ajaxpager.js" type="text/javascript"></script>

03 <script>

04 $(function(){

06 var pager;

08 function buildInfo(data){

09 //数组为空，表示没有查询到数据

10 if(data.length==0){

11 var empty_data_info = "<tr><td colspan='5' style='color:red'>查询无数据</td></tr>";

12 $("#clanInfo tbody" ).html(empty_data_info);

13 }

14 else{

15 var tempHtml = "";

16 for(var i=0;i<data.listInfo.length;i++){

17 var temp = $("<tr></tr>");

18 temp.append ("<td>"+data.listInfo[i].iClanId+"</td>");

19 temp.append ("<td>"+data.listInfo[i].sClanName+"</td>");

20 temp.append ("<td>"+data.listInfo[i].iArea+"</td>");

21 temp.append ("<td>"+data.listInfo[i].iLeaderUin+"</td>");

22 temp.append ("<td><a href='#' onclick='WozClanManager.ClanInfoManager.resetPwd("+data.listInfo[i].iClanId+");'>重置二级密码</a></td>");

23 tempHtml +="<tr>"+temp.html()+"</tr>";

24 }

25 $("#clanInfo tbody" ).html(tempHtml);

26 pager.updatePageArea(data.totalCount);

27 }

28 }

30 $("#searchBtn").click(function(){

31 pager = new AjaxPager({

32 renderTo:'ajaxpage',

33 url:"http://gavin.qq.com/admin/admin.php",

34 params:{

35 'action':'queryClanInfo',

36 'sClanName':$("#sClanName").val(),

37 'iClanId':$("#iClanId").val()

38 },

39 callBackMethod:buildInfo

40 });

41 pager.topPage();

42 });

44 });

46 </script>

在上面的代码中，pager.updatePageArea(data.totalCount);这个函数本来想放到控件中的loadData函数的回调函数执行的，但是如果这样做，就必须约定后台返回的json数组的格式了，失去了灵活性，所以就暂时提供给调用者自己去更新总的页数，所以这里封装得不是很彻底，希望大家指点下我更好的解决方法。

需要注意的问题：www.2cto.com

在整个开发中，我遇到了一个关于函数调用作用域的问题，即"this"的问题，在topPage等方法中，我们直接使用this.defaultOptions已经得不到AjaxPaer的配置项了，这是因为在topPage函数中，this已经变成了绑定该函数的dom元素，如果我们需要在topPage函数中使用AjaxPager的this，那么就需要在AjaxPager的构造方法中定一个全局的函数，来返回AjaxPager的this，即利用闭包来实现。