注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

jquery.spout.ajaxpage - ajax分页插件  

2011-10-13 13:07:08|  分类: web前端技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近项目大量需要ajax分页,于是便有了编写一个适用于各种情况的ajax分页需求。
虽然规定了分页全部由前端完成,后端只负责发给前端一个总数,后端根据前端发过来的第几项至第几项去数据库查取并返回,但是开发团队人多,又可能存在JSON数据格式不统一的情况。
例如:
php工程师1要求发送格式为:{action:"getlist", start:10, end:20};而返回数据为:{total:500, data:[...]}
php工程师2要求发送格式为:{ac:"ajaxpage", startnum:10, endnum:20};而返回数据为:{all:500, data:[...]}
等等。。。
再加上分页样式各不相同,可能有些只有上下页,而有些可以直接跳转到指定页,而有的分页样式说不定是红色的,而有的是蓝色的。有些需要分的数据是新闻,而有些人员列表和头像...
从目前来看,我们的代码只剩下复制粘贴了,别无他法。
而我最近编写的 jquery.spout.ajaxpage 插件,可以轻松解决这个问题。jquery.spout.ajaxpage 插件只是提供最基本的一些属性和方法,对于显示层面上的东西不做涉及,完全由用户自定义回调函数来解决。

jquery.spout.ajaxpage源码、API、实例测试代码: https://github.com/DoubleSpout/jquery.spout.ajaxpage

我们先来看下API,看完API相信大家就知道如何使用了,API很简单:

ajaxpage API:
1、option参数说明:
用法:var ajaxpage = new Spout_ajaxpage(option);
pagenum : 每页多少条记录
ajaxmethod : ajax请求方式,get或者post
ajaxurl: ajax请求地址
data : ajax发送后端的数据格式,注意:$spage和 $epage 代表发给后台的 开始记录指针位置和结束记录指针位置
totalkey : 表示后端返回的JSON数据格式中 所以记录条数的 KEY,这个一定要设置正确
putcallback : 表示后端返回结果后的回调,2个参数data为后端返回的数据,obj即为 Spout_ajaxpage 实例对象

2、Spout_ajaxpage实例对象的属性:
total: 总记录条数
curpage : 当前页码
allpage : 总页数
start : 当前记录起始指针位置
end : 当前结束记录指针位置
pagenum : 每页记录数

3、Spout_ajaxpage实例对象的方法:
first([callback])方法:跳转第一页,如果不传callback回调函数,默认使用 option.putcallback(data, obj),同样传2个参数,下同。
prev([callback])方法:跳转上一页。
next([callback])方法:跳转下一页。
last([callback])方法:跳转末页。
specify(pagenum, [callback])方法:跳转到指定pagenum页面,当pagenum不符合要求,不做任何动作
intial()方法:跳转至第一页,初始化数据重新计算分页

非红色部分大家一目了然,需要注意的是红色部分。
1、option中的data选项,例如:后端要求我们每次都发送 {action:"getlist", start:10, end:20} 这样的格式,
只需将data设置为:{action:"getlist", start:“$spage”, end:“$epage”}
2、option中的totalkey,表示后端返回给前端的JSON数据格式中哪个KEY代表记录总数,例如:
后端返回给前端数据格式为:{all:500, data:[...]},这里的记录总数KEY便是all,只要将option.totalkey设置为"all"就可以了。
3、option中的putcallback回调函数,这个回调函数是最关键的,即是每次ajax数据返回以后执行,接收2个参数,第一个参数为data,是从后端返回的完整JSON数据,第二个参数是Spout_ajaxpage的实例对象,它包含API上所列举的属性和方法。我们还是来看下实例:
putcallback : function(data, obj){
$('#content').html(data.content);//更新数据列表
$('#status').html('每页'+obj.pagenum+'条记录,总共'+obj.total+'条记录, 当前是第'+obj.curpage+'页,共有'+obj.allpage+'页,当前S和E的值为:'+obj.start+'/'+obj.end);//更新分页信息
}
回调函数是用来更新数据列表和更新分页信息的,当然你可以根据你的需要做其他任何事情。注意:这个回调是在每次ajax返回时才会执行的,也是下面Spout_ajaxpage的实例对象的其他方法默认回调函数。
4、Spout_ajaxpage的实例对象的first([callback])方法,这里重点要说的是参数callback,这是一个可选项,你可以单独为这个方法定义回调,也可以不传callback方法使用默认的即option.putcallback 方法,同样也是接收2个参数。
5、Spout_ajaxpage的实例对象的intial()方法,将重新计算总数和分页,并跳转到第一页。可能有些页面的数据在不断更新,而这个页面用户又不希望按F5来进行刷新,比如左边在看足球直播,而右边是用户留言列表。当然我们可以用comet服务器推或者flash socket等来实现,这边不做讨论。对于有分页需求来说可能1分钟前有50条留言,但是1分钟以后就有70条留言了,调用这个intial()方法可以让jquery.spout.ajaxpage再进行一次初始化分页,保证数据的更新。

使用中有任何BUG或者问题欢迎留言:http://spout.cnodejs.net/message/



  评论这张
 
阅读(1035)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016