Ajax实现页码式分页

Ajax实现页码式分页
1. 问题场景
分别实现如下分页效果：

 

 
2. 实现方法
第一种样式的实现：
Ajax：
$(function(){
var url = "product/type/list.do";
var currentPage = 1;
var number = 10;

/*分页，已封装，可直接调用*/
var pageNum = function(url,data){
$("#sum").text(data);
$("#page").children().remove();
if (currentPage > 1)
$("#page").append("<li><a href='" + url + "'><<</a></li>");
var start = 1;
var end = 1;
if (data <= 5) {
start = 1;
end = data;
} else if (currentPage < 4) {
start = 1;
end = 5;
} else if (data - currentPage < 3) {
start = data - 4;
end = data;
} else {
start = currentPage - 2;
end = parseInt(currentPage) + 2;
}
for (var i = start; i <= end; i++) {
if (i == currentPage) {
$("#page").append("<li><a style='background:#fba976;color:#fff;' href='" + url + "'>" + i + "</a></li>");
} else {
$("#page").append("<li><a href='" + url + "'>" + i + "</a></li>");
}
}
if (currentPage < data)
$("#page").append("<li><a href='" + url + "'>>></a></li>");
$("#page a").click(function() {
var page = $(this).text();
if (page == "<<") {
page = 1;
}
if (page == ">>") {
page = data;
}
currentPage = page;
console.log("当前页数:" + page);
pageOpera($(this).attr("href"), page);
return false;
});
};

/*分页查询*/
var pageOpera = function(url,startPage){
$.ajax({
url : url,
type : "get",
dataType : "json",
data : {
"start" : (startPage-1)*number,
"number" : number
},
success : function(data){
console.log(data);
if(data.data.length == 0){
console.log("没有分类");
}else{
$("#categoryList tr").remove();
for(var i=0;i<data.data.length;i++){
var name = data.data[i].name;
var description = data.data[i].description;

html = "具体数据的html";
$("#categoryList").append(html);
}
}
var count = data.size;
var pageCount = parseInt((count-1)/number + 1);
//alert(pageCount);
pageNum(url,pageCount);
},
error : function(data){
console.log(data);
console.log("error");
}
});
};


pageOpera(url, 1);
});
对应的html
<div class="row">
<div class="col-sm-1  col-sm-offset-7 " style="text-align:right;">
<br> <br>共<span id="sum"></span>页
</div>
<div class="col-sm-4">
<ul class="pagination pagination-lg" id="page"></ul>
</div>
</div>
第二种样式的实现：
Ajax：
//初始化，加载第一页
$(function(){
loadData(curpage);
 });
var curpage =1;
var number = 10;
var pagebutton = function(pageNums,number){
    //分页按钮被点击时触发，重新查询数据
$(".pageButton").click(function(){
//再去查一共多少页
var name = $(this).attr("name");
if(name=="sy"){
curpage = 1;
}else if(name=="syy"){
curpage = --curpage>1?curpage:1;
}else if(name=="xyy"){
curpage = ++curpage>pageNums?pageNums:curpage;
}else if(name=="wy"){
curpage=pageNums;
}
loadData(curpage);
/*$("#showCurrnetPage").text(curpage+"/"+pageNums);*/

});

}


//分页查询真实数据
var loadData = function(start){
var param = {"start":start,"number":number};
$.getJSON("api/year/list",param,function(data){
$("#tbody_content").empty();
var code = data.code;
if(code=="0"){
var page = Math.ceil(data.size/number);
$("#showCurrnetPage").text(start+"/"+page);
$(".pageButton").off();
pagebutton(page,number);
 
var arr = data.data;
$.each(arr,function(index){
var html = '<tr>'
               +'<td>'+index+'</td>'
               +'<td>'+this.name+'</td>'
               +'<td>'
                +'<button t_id="'+this.id+'" class="btn btn-danger del_but">删除</button>'
              +'</td>'
              +'</tr>';
             $("#tbody_content").append(html);
             var del_but = $("#tbody_content").children().last().find("button.del_but");
             deleteItem(del_but);
});
}
 
});
 };
Html
<div class="row">
    <ul class="pager">
<li><a class ="pageButton" name="sy">首页</a></li>
<li><a class ="pageButton" name="syy">上一页</a></li>
<li><a class ="pageButton" name="xyy">下一页</a></li>
<li><a class ="pageButton" name="wy">尾页</a></li>
<li><a>当前页码：<span id="showCurrnetPage">1</span></a></li>
</ul>
</div>