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

原创 2015年11月19日 17:59:52
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后更新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');
        }
    });

}





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

插件地址: DownloadVisit Project in GitHub 的
  • zxw394
  • zxw394
  • 2014-06-11 16:53
  • 28242

jquery+bootstrap分页工具条插件

一.适合环境   jquery+bootstrp构建的html页面 二.代码片段 //定义全局变量 var page_size = 0;//总页数 var current_page_num = 1;...

bootstrap、jQuery、Ajax数据分页

1、bootstrap数据分页 2、jQuery、Ajax数据分页 3、bootstrap、jQuery、Ajax数据分页

使用Bootstrap Paginator分页插件进行分页

Bootstrap Paginator是一款基于Bootstrap和jQuery的分页组件。可以让我们方便的构建分页应用。 首先,我们需要引用相应的文件,其下载地址为:https://githu...

bootstrap-table插件实现ajax服务端分页显示

利用bootstrap-table插件实现ajax服务端分页 1、引入bootstrap-table插件核心js、css以及中文语言文件 网上提供的在线cdn,如果加载时间过长,请下载插件到项目引入 ...

spring mvc ajax分页 bootstrap-paginator

spring mvc ajax bootstrap-paginator

Bootstrap 分页插件 ajax获取数据显示

bootstrap-paginator

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求

Ajax 实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解。 本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里...

Jquery的DataTable插件AJAX服务器分页的的学习心得

首先得先引入对应的js 1、jquery.min.js 首先导入 2、 File: jquery.dataTables.min.js Version: 1.9.4 这是我使用的版本 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)