Bootstrap V3.0 Ajax无刷新分页的实现 附代码
效果图:
1.首先输入数据并提交:
2.控制台收到请求后 手动打回20条数据
3.查看前台变化,分页已显示
4.点击页号,Ajax无刷新发送请求
核心代码:
html部分:
<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" οnclick="Again()" value="重新查询"> <caption></caption> <thead id="thead"> </thead> <tbody id="tbody"> </tbody> </table> <ul class="pagination" id="pager"> </ul> </div> </div>
js部分:
/** * 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)\" οnclick=\"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)\" οnclick=\"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)\" οnclick=\"pagepre("+n+")\"><</a></li>"); for(i=1;i<=n&&i<=11;i++) { $("#pager").append("<li><a href=\"javascript:void(0)\" οnclick=\"pageAjax("+tuple_num+","+(offsetInt+i-1)*15+")\">"+i+"</a></li>"); } $("#pager").append("<li><a href=\"javascript:void(0)\" οnclick=\"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'); } }); }