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

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" onclick="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后更新nowvar 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');        }    });}