ajax分页导航栏函数

转自：http://blog.conshare.com/index/detail/id/11

很多时候我们都是ajax来获取数据列表，分页当然也是希望能够人性化，当页码过多的时候怎么安排显示呢？今天我来提供一个通用的导航样式的js函数；

该函数功能：

1、提供首页，上一页，下一页，末页，当页码超过10页时提供输入跳转功能；

2、当前页链接不可用，当前页是首页时，首页和上一页链接是不可用，同理是末页的时候下一页和末页链接不可用；

3、函数提供三个参数：pagebarid：存放分页导航的对象ID；total：总页数；current：当前页；

4、total和current可以从ajax获得数据列表的时候同时送出，这样很容易为分页函数调用；

5、当前页码尽可能出现在10个页码的中间，保证用户方便浏览当前页前后的几个页码。

下面看具体函数代码：

 

代码如下

1. /**
2.  * 分页导航栏函数,里面的GoPage函数就是用来ajax翻页的
3.  * @param string pagebarid  分页导航存放对象的ID
4.  * @param int total         总页数
5.  * @param int current       当前页
6.  */
7. function updatepage (pagebarid , total , current ) {
8.      var jumpstr  =  '' ;
9.      if  (total  >  10 )  {
10.          if  ( (current  -  5 )  >  0  && current  < total  -  5 )  {
11.              var start  = current  -  5 ;
12.              var end  = current  +  5 ;
13.          }
14.          else
15.              if  (current  >=  (total  -  5 ) )  {
16.                  var start  = total  -  10 ;
17.                  var end  = total ;
18.              }
19.              else  {
20.                  var start  =  1 ;
21.                  var end  =  10 ;
22.              }
23.         jumpstr  +=  '跳转 <input name="num" type="text" id="num" />' ;
24.         jumpstr  +=  '<input name="go" type="button" id="go" value="GO" οnclick="GoPage(document.getElementById('num ').value);" />' ;
25.      }
26.      else  {
27.          var start  =  1 ;
28.          var end  = total ;
29.      }
30.      var str  =  '' ;
31.      if (current  ==  1 ) {
32.         str  +=  '<a href="javascript:;">第一页</a>' ;
33.         str  +=  '<a href="javascript:;">上一页</a>' ;
34.      }
35.      else {
36.         str  +=  '<a href="javascript:GoPage(1);">第一页</a>' ;
37.         str  +=  '<a href="javascript:GoPage(' + (current - 1 ) + ');">上一页</a>' ;
38.      }
39.      for  (i  = start ; i  <= end ; i ++ )  {
40.          if  (i  == current )  {
41.             str  +=  '<a href="javascript:;">['  + current  +  ']</a>' ;
42.          }
43.          else  {
44.             str  +=  '<a href="javascript:GoPage('  + i  +  ')">'  + i  +  '</a>' ;
45.          }
46.      }
47.      if (current  == total ) {
48.         str  +=  '<a href="javascript:;">下一页</a>' ;
49.         str  +=  '<a href="javascript:;">最后页</a>' ;
50.      }
51.      else {
52.         str  +=  '<a href="javascript:GoPage(' + (current + 1 ) + ');">下一页</a>' ;
53.         str  +=  '<a href="javascript:GoPage(' +total + ');">最后页</a>' ;
54.      }
55.     document. getElementById (pagebarid ). innerHTML  = str  + jumpstr ;
56. }
57.