1. 程式人生 > >Bootstrap V3.0 Ajax無重新整理分頁的實現 附程式碼

Bootstrap V3.0 Ajax無重新整理分頁的實現 附程式碼

/**
 * 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+")\">&lt;</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+")\">&gt;</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'); } }); }