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

}