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

这段时间在做公司项目的时候需要用到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对该