jQuery实现ajax无刷新分页页码控件

网络编程 2024/12/25 佚名

3 1 2

这段时间在做公司项目的时候需要用到ajax进行分页（点击页码也是无刷新的显示上一页或下一页的内容，不是一般的选择跳转），但是在网上找了一下，大部分分页插件都是直接刷新跳转的，感觉和我的需求差距比较大，就自己动手写了一个可以实现自己需要的功能的js来实现这个控件，实现的效果如下：

因为业务需要，我需要在一个页面创建多个这样的页码控件（有些是在ajax中生成的），显然为每一个控件写一个专属的js是不现实的，所以，我将公共部分提取出来，然后通过传入的选择器不同，对不同的控件进行相应方法的调用。

下面是该控件实现的js代码：

// JavaScript Document
$(function(){
  //点击分页按钮触发
  $("#pageGro li").live("click",function(){
    var pageNum = parseInt($(this).html());//获取当前页数
    //获取当前评价分类的总页数
    var totalnum = type+""+praise;
    if(pageCount[parseInt(totalnum)] > 5){
      pageGroup(pageNum,pageCount[parseInt(totalnum)]);
    }else{
      $(this).addClass("on");
      $(this).siblings("li").removeClass("on");
    }
    loadData(pageNum);//这个方法里面就是ajax获取数据的代码，为了让这个页码控件能够更通用，我将这个方法写在调用这个js的php页面中，这样使得这个页码控件能应用于更多的场景中。
  });
  //点击上一页触发
  $("#pageGro .pageUp").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount);
    if(pageCount[parseInt(totalnum)] > 5){//初始默认显示1-5页（若真实页码小于五，则根据真实页码数显示）
      var pageNum = parseInt($(this).children("li.on").html());//获取当前页
      pageUp(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $("#pageGro ul li.on").index();//获取当前页
      console.log("index = "+index);
      if(index > 0){
        $(this).next().find("li").removeClass("on");//清除所有选中
        $(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页
        loadData(index);
      }
    }
  });
  //点击下一页触发
  $("#pageGro .pageDown").live("click",function(){
    var totalnum = type+""+praise;
    console.log(totalnum);
    console.log(pageCount[parseInt(totalnum)]);
    if(pageCount[parseInt(totalnum)] > 5){
      var pageNum = parseInt($(this).children("li.on").html());//获取当前页
      pageDown(pageNum,pageCount[parseInt(totalnum)]);
      loadData(pageNum);
    }else{
      var index = $(this).children("ul li.on").index()+1;//获取当前页
      console.log(index);
      if(index+1 < pageCount[parseInt(totalnum)]){
        $(this).prev().find("li").removeClass("on");//清除所有选中
        $(this).prev().find("ul li").eq(index+1).addClass("on");//选中下一页
        loadData(index+2);
      }
    }
  });
});
//点击跳转页面
function pageGroup(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,0);
    break;
    case 2:
      page_icon(1,5,1);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,3);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,4);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,2);
    break;
  }
}
//根据当前选中页生成页面点击按钮
function page_icon(page,count,eq,element){
  var $this = element;
  var ul_html = "";
  for(var i=page; i<=count; i++){
    ul_html += "<li>"+i+"</li>";
  }
  $this.children("ul").html(ul_html);
  console.log($this.children("ul li:eq("+eq+")"));
  $this.find("ul li:eq("+eq+")").addClass("on");
}
//上一页
function pageUp(pageNum,pageCount){
  switch(pageNum){
    case 1:
    break;
    case 2:
      page_icon(1,5,0);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,2);
    break;
    case pageCount:
      page_icon(pageCount-4,pageCount,3);
    break;
    default:
      page_icon(pageNum-2,pageNum+2,1);
    break;
  }
}
//下一页
function pageDown(pageNum,pageCount){
  switch(pageNum){
    case 1:
      page_icon(1,5,1);
    break;
    case 2:
      page_icon(1,5,2);
    break;
    case pageCount-1:
      page_icon(pageCount-4,pageCount,4);
    break;
    case pageCount:
    break;
    default:
      page_icon(pageNum-2,pageNum+2,3);
    break;
  }
}
//生成分页按钮
function createBtn(pageCount, element){
  if(pageCount>5){
    page_icon(1,5,0,element);
  }else{
    page_icon(1,pageCount,0,element);
  }
}

页面上该页码控件按钮的代码

<div id="pageGro" class="cb">
  <div class="pageUp">上一页</div>
  <div class="pageList">
    <ul>
     <!--页码显示区 -->
    </ul>
  </div>
  <div class="pageDown">下一页</div>
</div>

页面上写的用于被该页码控件调用实现无刷新加载数据的ajax方法

//ajax获取点击分页按钮应该加载的数据
function loadData(pageNum){
  console.log("type = "+type +", praise = " + praise);
  var beChangeElement = '';
  switch(type){
  case 0: beChangeElement += "#togivineva ";break;
  default:;
  case 1: beChangeElement += "#givineva ";break;
  }
  switch(praise){
  default:;
  case 0:beChangeElement += ".praiseAll";break;
  case 1:beChangeElement += ".praiseBad";break;
  case 2:beChangeElement += ".praiseNormal";break;
  case 3:beChangeElement += ".praiseGood";break;
  }
  $.ajax({
    type:"Get",
    url:你要请求的url地址,
    data:{page:pageNum},
    dataType:'json',
    success:function(data){
      var info = data.info;
      if(info.length > 0){//判断ajax回来的数据是否为空
        var s = '';
        beChangeElement = $(beChangeElement);
        console.log(beChangeElement);
        beChangeElement.children("div.detail-content").remove();
        $.each(info, function(index,v){
          s="你ajax出来要填补到页面上的数据";
          beChangeElement.children("#pageGro").before(s);//表示将s中的内容填充到相应页码控件前面
        });
      }else{
        var t = "<p style='text-align:center;margin:20px;font-size:18px;color:#999;'>暂时还没有内容哦！</p>";
        beChangeElement.html(t);
      }
    },
  });
}

到此，该页码控件的使用就完成了。

在其中需要注意的内容如下：

1.大家都可以看到我在ajax中用beChangeElement这个变量来表示我选中的选择器时，是把该选择器的标签以字符串的形式存储在变量中，在需要调用的时候才使用$()转换为选择器。为什么我不能在前面就直接把选择器赋给变量呢。因为jQuery不允许你选择不存在的选择器。这么说，可能就要有疑问了，什么样的情况下我要选择的选择器会不存在？（第一种情况：你把选择器的名字写错了，所以jquery找不到（我相信大多数人是不会犯这个错误的）。第二种情况：在我们使用ajax进行数据交互的时候，有很多页面上的标签和数据是我们通过ajax传递显示在页面上的，这些标签数据在页面初始化阶段是不存在的，但是我们写的js方法，非触发事件（除点击事件，鼠标悬浮等需要交互的时间）都会在页面初始化的装载阶段被解释执行，所以就会存在变量获取到不存在的选择器使得值为空阻断后续对这个选择器进行js操作），如果你在使用的时候发现js对某个选择器的操作失效了，就可以考虑一下这样的情况

2.ajax生成出来的页面内容不能跟之前页面初始化时生成的内容一样被页面原有的js控制。因为这涉及到一个异步和同步的问题，在页面渲染的时候会将对应的js绑定到相应的html标签上，等待事件触发，但是因为ajax出来的页面内容出现在页面原有的js之后，所以js无法未卜先知的去绑定它。所以我们需要根据事件冒泡机制，将需要对ajax生成出来的页面内容进行操作的js委托给该内容的父标签进行处理（我们一般选用标签作为这样的父标签，但是要注意的是，不要一次性委托太多的js在标签上，不然使得页面变得很庞大，页面的处理速度会变慢），委托事件可以表示如下：

1.$("body").on('click', ".cumulative-eva a",function(){});//click:表示要委托的事件类型（这里表示要委托的事件是点击事件），".cumulative-eva a"：触发事件的选择器名字（这里表示触发点击事件的选择器是$(.cumulative-eva a)），function里面写触发事件后js对该事件的处理代码。

2.$(".cumulative-eva a").live("click",function(){});

3.在js中我写了这么一条js语句来选中上一页，语句如下：

$(this).next().find("ul li").eq(index-1).addClass("on");//选中上一页

有的人就会想在这里为什么不用children()，用children()是否也可以？那么，在解释这个问题之前我们先来看看children()和find()的区别。

区别如下：

关于遍历:children()是对当前选中的选择器标签进行编号，对于该选择器标签的子类标签无论多少个都当成一个整体，不对其进行区分。而find()则是对当前选中的选择器标签下面的子孙类标签进行编号，通过编号可以找到相对应的某一个子孙类标签。

从以上的描述我们很显然知道children()并不适用于我们这样一个应用场景，因为我们需要选中$(this)下的某一个li，这个用children()是做不到的。那么什么样的情况下可以使用children()呢，看下面这段js：

var pageNum = parseInt($(this).children("li.on").html());//获取当前页

在这个应用场景下因为页码控件的特殊性，被加上“on”这个class的li标签同一时间页面上只可能有一个，所以用children()去遍历$(this)找他的子类被加上“on”这个class的li标签，只可能返回一个结果，而不是一个数组，所以在这样的场景下可以使用children()标签。

以上为我写页码控件的全部内容，至此mark一下。最后放上该页码控件的css代码，让大家参考参考，至于控件所用的图片，我直接上传到css代码后面，你们需要的时候保存下来使用就行。(作为一个懒人，可供下载的源码包啥的我就不弄了，太麻烦，如果有兴趣的朋友，以后有时间的时候我再弄一份出来吧~)

页码控件css样式:

/* CSS Document */
/*分页*/
#pageGro{ width:400px; height:25px; margin:20px auto;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;}
#pageGro .pageUp{ text-indent:23px; background:url(../img/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{ text-indent:5px; background:url(../img/pageDown.png) 46px 6px no-repeat;}

页码控件中使用的上下页图标：