热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

BootstrapV3.0Ajax无刷新分页的实现附代码效果图:1.首先输入数据并提交:2.控制台收到请求后手动打回20条数据3.查看前台变化ÿ
Bootstrap V3.0 Ajax无刷新分页的实现 附代码

效果图:




1.首先输入数据并提交:










2.控制台收到请求后 手动打回20条数据










3.查看前台变化,分页已显示













4.点击页号,Ajax无刷新发送请求








核心代码:
html部分:

class="fluid" id="data">
class="col-xs-12 well">
id="now">
class="table table-bordered">
type="button" class="btn btn-success pull-right" id="again" οnclick="Again()" value="重新查询">

id="thead">


id="tbody">



    class="pagination" id="pager">




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("

  • \"Javascript:void(0)\" οnclick=\"pageAjax(" + 15 + "," + (pre - 2) * 15 + ")\">" + (pre-1) + "
  • ");
    pre--;
    next--;
    }if(now>1)pageAjax(15,(now-2)*15); //跳转
    }function pagenext(){if (now==next && next//前进
    $("#pager").find("li").first().next().remove();
    $("#pager").find("li").last().before("
  • \"Javascript:void(0)\" οnclick=\"pageAjax(" + 15 + "," + next * 15 + ")\">" + (next+1) + "
  • "
    );
    if(next>=11&&next;
    pre++;
    }}if(nowpageAjax(15, now * 15); //跳转
    }function dopage(tuple_num,offsetInt,n){$("#pager").append("
  • \"Javascript:void(0)\" οnclick&#61;\"pagepre("&#43;n&#43;")\"><
  • "
    );
    for(i&#61;1;i<&#61;n&&i<&#61;11;i&#43;&#43;) {$("#pager").append("
  • \"Javascript:void(0)\" οnclick&#61;\"pageAjax("&#43;tuple_num&#43;","&#43;(offsetInt&#43;i-1)*15&#43;")\">"&#43;i&#43;"
  • "
    );
    }$("#pager").append("
  • \"Javascript:void(0)\" οnclick&#61;\"pagenext("&#43;n&#43;")\">>
  • "
    );
    }function doAjax() {var request_field&#61;0;
    var cmd_type &#61; 2;
    var start_time &#61; $("#start_time").val();
    var end_time &#61; $("#end_time").val();
    var ip &#61; $("#ip").val();
    var domain &#61; $("#domain").val();
    $("input[type&#61;checkbox]").each(function(){if($(this).prop("checked")&#61;&#61;true)request_field&#61;parseInt(request_field)&#43;parseInt($(this).val());
    });



    var statusArray&#61;["成功","指令ID重复","缺少必选字段","字段定义冲突",
    "版本错误","检验码错误","操作类型错误","长度错误","用户标识错误",
    "规则数量错误","数据查询失败","权限错误","指令处理超时"]statusArray[32]&#61;"时间字段错误";
    statusArray[33]&#61;"IP地址字段错误";
    statusArray[34]&#61;"掩码错误";
    statusArray[34]&#61;"未知错误";
    statusArray[301]&#61;"网络连接错误&#xff0c;无法与后端进行通讯";
    statusArray[302]&#61;"错误的请求地址";
    statusArray[303]&#61;"协议异常";
    statusArray[304]&#61;"不支持的编码";

    var request &#61; {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 &#61; JSON.stringify(request);
    var jsonStr &#61; encoded;
    var actionStr &#61; "../../../client/special_domain";
    $.ajax({url: actionStr,
    type: &#39;POST&#39;,
    data: jsonStr,
    dataType: &#39;json&#39;,
    contentType: "application/json; charset&#61;utf-8",
    success: function (data) {$("#aye").button(&#39;reset&#39;);
    if (data.rcmd.status &#61;&#61; 0){cnf_id&#61;data.cnf_id;
    total&#61;data.total;
    n&#61;Math.ceil(total/tuple_num);
    if(n!&#61;0) {$("#pager").empty();
    $("#tbody").empty();
    $("#thead").empty();
    $("#thead").append("连接时间客户端IP服务器IP域名响应地址");
    $("#now").text("第 "&#43;now&#43;" / "&#43;n&#43;"页");
    $.each(data.domain, function(i, obj) { //初始分页
    $("#tbody").append("\"tr"&#43;i&#43;"\""&#43;">");
    $.each(obj, function(j, item) {if(item&#61;&#61;"null"){$("#tr"&#43;i).append("" &#43;"无"&#43;"");
    }else{$("#tr"&#43;i).append("" &#43; item &#43;"");
    }})})dopage(tuple_num,0,n);
    $("#data").show();
    $("#query").hide();
    }else{$(".modal-body").text("没有输据!");
    $("#myModal").modal(&#39;show&#39;);
    }}else{$(".modal-body").text("错误码"&#43;" "&#43;data.rcmd.status&#43;" "&#43;statusArray[data.rcmd.status]);
    $("#myModal").modal(&#39;show&#39;);
    }
    // Do Anything After get Return data
    // $.each(data.payload, function(index){
    // $("#result").append("
    " &#43; data.payload[index].beanStr);
    // });
    },
    Error: function (xhr, error, exception) {$(this).button(&#39;reset&#39;);
    // handle the error.
    alert(exception.toString());
    $("#myModal").modal(&#39;show&#39;);
    }});
    }function pageAjax(tuple_num,offset){var request_field&#61;0;
    var cmd_type &#61; 2;
    var start_time &#61; $("#start_time").val();
    var end_time &#61; $("#end_time").val();
    var ip &#61; $("#ip").val();
    var domain &#61; $("#domain").val();
    var offset_now &#61;offset;
    var tuple_num_now&#61;tuple_num;

    now&#61;(offset_now/15)&#43;1; //当前页码
    $("input[type&#61;checkbox]").each(function(){if($(this).prop("checked")&#61;&#61;true)request_field&#61;parseInt(request_field)&#43;parseInt($(this).val());
    });

    var pagerequest &#61; {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 &#61; JSON.stringify(pagerequest);
    var jsonStr &#61; encoded;
    var actionStr &#61; "../../../client/special_domain";
    $.ajax({url: actionStr,
    type: &#39;POST&#39;,
    data: jsonStr,
    dataType: &#39;json&#39;,
    contentType: "application/json; charset&#61;utf-8",
    success: function (data) {$("#aye").button(&#39;reset&#39;);
    if (data.rcmd.status&#61;&#61; 0){$("#tbody").empty();
    $("#now").text("第 "&#43;now&#43;" / "&#43;n&#43;"页");
    $.each(data.domain, function(i, obj) {$("#tbody").append("\"tr"&#43;i&#43;"\""&#43;">");
    $.each(obj, function(j, item) {if(item&#61;&#61;"null"){$("#tr"&#43;i).append("" &#43;"无"&#43;"");
    }else{$("#tr"&#43;i).append("" &#43; item &#43;"");
    }})})}else{$(".modal-body").text("错误码"&#43;" "&#43;data.rcmd.status&#43;" "&#43;statusArray[data.rcmd.status]);
    $("#myModal").modal(&#39;show&#39;);
    }// Do Anything After get Return data
    // $.each(data.payload, function(index){
    // $("#result").append("
    " &#43; data.payload[index].beanStr);
    // });
    },
    Error: function (xhr, error, exception) {$(this).button(&#39;reset&#39;);
    // handle the error.
    alert(exception.toString());
    $("#myModal").modal(&#39;show&#39;);
    }});

    }











    推荐阅读
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    • Nginx使用(server参数配置)
      本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
    • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
    • Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
    • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
      本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
    • SpringMVC接收请求参数的方式总结
      本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
    • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
    • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 本文介绍了2015年九月八日的js学习总结及相关知识点,包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后,并且对语句和注释的使用进行了说明。 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
    • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
    • javascript  –  RTL布局中的bootstrap datepicker无法正常工作
      RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ... [详细]
    author-avatar
    CHEN--MIN--珊
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有