Bootstrap V3.0 Ajax无刷新分页的实现 附代码

<div class="fluid" id="data">
<div class="col-xs-12 well">
<span id="now"></span>
<table class="table table-bordered">
<input type="button" class="btn btn-success pull-right" id="again" onclick="Again()" value="重新查询">
<caption></caption>
<thead id="thead">

</thead>
<tbody id="tbody">

</tbody>
</table>
<ul class="pagination" id="pager">

</ul>
</div>
</div>

/**
* Created by wangpai on 2015/11/3.
*/
var cnf_id = 0;
var total=0;
var tuple_num=15;
var offset=0;

var now=1; //pageAjax后更新now
var pre=1;
var next=11;
var n=0;
$("#data").hide();
function pagepre(){
if(now==pre&&pre!=1) { //后退
$("#pager").find("li").last().prev().remove();
$("#pager").find("li").first().after("<li><a href=\"javascript:void(0)\" onclick=\"pageAjax(" + 15 + "," + (pre - 2) * 15 + ")\">" + (pre-1) + "</a></li>");
pre--;
next--;
}
if(now>1)
pageAjax(15,(now-2)*15); //跳转
}

function pagenext(){
if (now==next && next<n) { //前进
$("#pager").find("li").first().next().remove();
$("#pager").find("li").last().before("<li><a href=\"javascript:void(0)\" onclick=\"pageAjax(" + 15 + "," + next * 15 + ")\">" + (next+1) + "</a></li>");
if(next>=11&&next<n) {
next++;
pre++;
}
}
if(now<n)
pageAjax(15, now * 15); //跳转
}

function dopage(tuple_num,offsetInt,n){
$("#pager").append("<li><a href=\"javascript:void(0)\" onclick=\"pagepre("+n+")\"><</a></li>");
for(i=1;i<=n&&i<=11;i++) {
$("#pager").append("<li><a href=\"javascript:void(0)\" onclick=\"pageAjax("+tuple_num+","+(offsetInt+i-1)*15+")\">"+i+"</a></li>");
}
$("#pager").append("<li><a href=\"javascript:void(0)\" onclick=\"pagenext("+n+")\">></a></li>");
}

function doAjax() {

var request_field=0;
var cmd_type = 2;
var start_time = $("#start_time").val();
var end_time = $("#end_time").val();
var ip = $("#ip").val();
var domain = $("#domain").val();
$("input[type=checkbox]").each(function(){
if($(this).prop("checked")==true)
request_field=parseInt(request_field)+parseInt($(this).val());
});

var statusArray=["成功","指令ID重复","缺少必选字段","字段定义冲突",
"版本错误","检验码错误","操作类型错误","长度错误","用户标识错误",
"规则数量错误","数据查询失败","权限错误","指令处理超时"]
statusArray[32]="时间字段错误";
statusArray[33]="IP地址字段错误";
statusArray[34]="掩码错误";
statusArray[34]="未知错误";
statusArray[301]="网络连接错误，无法与后端进行通讯";
statusArray[302]="错误的请求地址";
statusArray[303]="协议异常";
statusArray[304]="不支持的编码";

var request = {
domain: {
header: {
cmd_type: cmd_type,
cnf_id: cnf_id
},
unit: {
start_time: start_time,
end_time: end_time,
ip: ip,
domain: domain,
request_field: request_field
},
},
offset:offset,
tuple_num:tuple_num,
};
//调用了jquery.json 库
var encoded = JSON.stringify(request);
var jsonStr = encoded;
var actionStr = "../../../client/special_domain";
$.ajax({
url: actionStr,
type: 'POST',
data: jsonStr,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#aye").button('reset');
if (data.rcmd.status == 0){
cnf_id=data.cnf_id;
total=data.total;
n=Math.ceil(total/tuple_num);
if(n!=0) {
$("#pager").empty();
$("#tbody").empty();
$("#thead").empty();
$("#thead").append("<tr><th>连接时间</th><th>客户端IP</th><th>服务器IP</th><th>域名</th><th>响应地址</th></tr>");
$("#now").text("第 "+now+" / "+n+"页");
$.each(data.domain, function(i, obj) { //初始分页
$("#tbody").append("<tr id=\"tr"+i+"\""+"></tr>");
$.each(obj, function(j, item) {
if(item=="null"){
$("#tr"+i).append("<td>" +"无"+"</td>");
}else{
$("#tr"+i).append("<td>" + item +"</td>");
}
})
})

dopage(tuple_num,0,n);
$("#data").show();
$("#query").hide();
}else{
$(".modal-body").text("没有输据!");
$("#myModal").modal('show');
}
}
else{
$(".modal-body").text("错误码"+" "+data.rcmd.status+" "+statusArray[data.rcmd.status]);
$("#myModal").modal('show');
}
//         Do Anything After get Return data
//          $.each(data.payload, function(index){
//              $("#result").append("</br>" + data.payload[index].beanStr);
//          });
},
Error: function (xhr, error, exception) {
$(this).button('reset');
// handle the error.
alert(exception.toString());
$("#myModal").modal('show');
}
});
}

function pageAjax(tuple_num,offset){

var request_field=0;
var cmd_type = 2;
var start_time = $("#start_time").val();
var end_time = $("#end_time").val();
var ip = $("#ip").val();
var domain = $("#domain").val();
var offset_now =offset;
var tuple_num_now=tuple_num;

now=(offset_now/15)+1;    //当前页码
$("input[type=checkbox]").each(function(){
if($(this).prop("checked")==true)
request_field=parseInt(request_field)+parseInt($(this).val());
});

var pagerequest = {
domain: {
header: {
cmd_type: cmd_type,
cnf_id: cnf_id
},
unit: {
start_time: start_time,
end_time: end_time,
ip: ip,
domain: domain,
request_field: request_field
},
},
offset:offset_now,
tuple_num:tuple_num_now,
};

var encoded = JSON.stringify(pagerequest);
var jsonStr = encoded;
var actionStr = "../../../client/special_domain";
$.ajax({
url: actionStr,
type: 'POST',
data: jsonStr,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
$("#aye").button('reset');
if (data.rcmd.status== 0){
$("#tbody").empty();
$("#now").text("第 "+now+" / "+n+"页");
$.each(data.domain, function(i, obj) {
$("#tbody").append("<tr id=\"tr"+i+"\""+"></tr>");
$.each(obj, function(j, item) {
if(item=="null"){
$("#tr"+i).append("<td>" +"无"+"</td>");
}else{
$("#tr"+i).append("<td>" + item +"</td>");
}
})
})
}
else{
$(".modal-body").text("错误码"+" "+data.rcmd.status+" "+statusArray[data.rcmd.status]);
$("#myModal").modal('show');
}

//         Do Anything After get Return data
//          $.each(data.payload, function(index){
//              $("#result").append("</br>" + data.payload[index].beanStr);
//          });
},
Error: function (xhr, error, exception) {
$(this).button('reset');
// handle the error.
alert(exception.toString());
$("#myModal").modal('show');
}
});

}