ajax 分页导航栏函数

PHPABC JavaScript 751 次浏览 , 没有评论

很多时候我们都是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" onclick="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;
      }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go