// 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获取点击分页按钮应该加载的数据
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);
      }
    },
  });
}

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

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

/* 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;}