转自:http://blog.conshare.com/index/detail/id/11
很多时候我们都是ajax来获取数据列表,分页当然也是希望能够人性化,当页码过多的时候怎么安排显示呢?今天我来提供一个通用的导航样式的js函数;
该函数功能:
1、提供首页,上一页,下一页,末页,当页码超过10页时提供输入跳转功能;
2、当前页链接不可用,当前页是首页时,首页和上一页链接是不可用,同理是末页的时候下一页和末页链接不可用;
3、函数提供三个参数:pagebarid:存放分页导航的对象ID;total:总页数;current:当前页;
4、total和current可以从ajax获得数据列表的时候同时送出,这样很容易为分页函数调用;
5、当前页码尽可能出现在10个页码的中间,保证用户方便浏览当前页前后的几个页码。
下面看具体函数代码:
代码如下
-
/**
-
* 分页导航栏函数,里面的GoPage函数就是用来ajax翻页的
-
* @param string pagebarid 分页导航存放对象的ID
-
* @param int total 总页数
-
* @param int current 当前页
-
*/
-
function updatepage (pagebarid , total , current ) {
-
var jumpstr = '' ;
-
if (total > 10 ) {
-
if ( (current - 5 ) > 0 && current < total - 5 ) {
-
var start = current - 5 ;
-
var end = current + 5 ;
-
}
-
else
-
if (current >= (total - 5 ) ) {
-
var start = total - 10 ;
-
var end = total ;
-
}
-
else {
-
var start = 1 ;
-
var end = 10 ;
-
}
-
jumpstr += '跳转 <input name="num" type="text" id="num" />' ;
-
jumpstr += '<input name="go" type="button" id="go" value="GO" οnclick="GoPage(document.getElementById('num ').value);" />' ;
-
}
-
else {
-
var start = 1 ;
-
var end = total ;
-
}
-
var str = '' ;
-
if (current == 1 ) {
-
str += '<a href="javascript:;">第一页</a>' ;
-
str += '<a href="javascript:;">上一页</a>' ;
-
}
-
else {
-
str += '<a href="javascript:GoPage(1);">第一页</a>' ;
-
str += '<a href="javascript:GoPage(' + (current - 1 ) + ');">上一页</a>' ;
-
}
-
for (i = start ; i <= end ; i ++ ) {
-
if (i == current ) {
-
str += '<a href="javascript:;">[' + current + ']</a>' ;
-
}
-
else {
-
str += '<a href="javascript:GoPage(' + i + ')">' + i + '</a>' ;
-
}
-
}
-
if (current == total ) {
-
str += '<a href="javascript:;">下一页</a>' ;
-
str += '<a href="javascript:;">最后页</a>' ;
-
}
-
else {
-
str += '<a href="javascript:GoPage(' + (current + 1 ) + ');">下一页</a>' ;
-
str += '<a href="javascript:GoPage(' +total + ');">最后页</a>' ;
-
}
-
document. getElementById (pagebarid ). innerHTML = str + jumpstr ;
-
}
-