jquery.spout.ajaxpage - ajax分页插件

发表于 | 更新于 | 分类于 | 评论数：

最近项目大量需要ajax分页，于是便有了编写一个适用于各种情况的ajax分页需求。
虽然规定了分页全部由前端完成，后端只负责发给前端一个总数，后端根据前端发过来的第几项至第几项去数据库查取并返回，但是开发团队人多，又可能存在JSON数据格式不统一的情况。

例如：

php工程师1要求发送格式为：

1
{action:"getlist", start:10, end:20}；而返回数据为：{total:500, data:[...]}

php工程师2要求发送格式为：

1
{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参数说明：

1
2
3
4
5
6
7
用法：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实例对象的属性：

1
2
3
4
5
6
7
用法见: https://github.com/DoubleSpout/jquery.spout.ajaxpage 
total: 总记录条数
curpage : 当前页码
allpage : 总页数
start : 当前记录起始指针位置
end : 当前结束记录指针位置
pagenum : 每页记录数

3、Spout_ajaxpage实例对象的方法：

1
2
3
4
5
6
7
用法见: https://github.com/DoubleSpout/jquery.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上所列举的属性和方法。我们还是来看下实例：

1
2
3
4
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再进行一次初始化分页，保证数据的更新。