AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

一 、效果图

二、JS

function getManagerList(dealerId,page2){
 macAddress = document.getElementById("activeXDemo").getMac();
 $.get("${ctxPath}/common/dealer/manager?"+Math.random(), {
    page2: page2,
    pageSize2: 9,
    dealerId: dealerId,
    macAddress:macAddress
 },
 function(data){
  if(data){
   var managerList=data.managerList;
   var uploadDir=data.uploadDir;
   var rs = "";
   for (var i=0;i<managerList.length;i++)
   {
    var name=managerList[i].personName;
    var picPath=managerList[i].picPath;
    if(picPath==null){
     var path="${ctxPath}/resources/assets/imgs/no_pic.png";
    }else{
     var path="${ctxPath}"+uploadDir+picPath;
    }
    rs+="<div class='col-xs-4 demo1_box'>";
    rs+="<img width='200px' height='130px' src='";
    rs+=path;
    rs+="'>";
    rs=rs+"<p>"+name+"</p></div> ";
   }
   $('#managerList').empty();
   $('#managerList').append(rs);
   var page2=data.page2;
   var stor_no2=data.stor_no2;
   var pageCount2=data.pageCount2;
   var pagination = "";
   pagination+="<ul class='pagination pager_cus'>";
   pagination=pagination+"<li><a>第 "+(page2 + 1);
   pagination=pagination+" 页/共 "+pageCount2+" 页</a></li>";
   pagination += "<li><a href='javascript:getManagerList(\"";
   pagination += dealerId;
   pagination += "\",";
   pagination += 0 + ");'>« 首页</a></li>";
   if(page2>0){
    pagination += "<li><a href='javascript:getManagerList(\"";
    pagination += dealerId;
    pagination += "\",";
    pagination += (page2 - 1) + ");'>« 上一页</a></li>";
   }
   var start=page2-3;
   var end=page2+3;
   if(start<0){
    end=end-start;
   }
   if(end >(pageCount2-1)){
    end = pageCount2-1;
    start=end -7;
   }
   for(var j=start;j<=end;j++){
    if(j>-1 && j<pageCount2){
     if(page2==j){
      pagination += "<li class='active'><a href='javascript:getManagerList(\"";
      pagination += dealerId;
      pagination += "\",";
      pagination += j + ");'>"+(j+1)+"</a></li>";
     }else{
      pagination += "<li><a href='javascript:getManagerList(\"";
      pagination += dealerId;
      pagination += "\",";
      pagination += j + ");'>"+(j+1)+"</a></li>";
     }
    }
   }
   if(page2<pageCount2-1){
    pagination += "<li><a href='javascript:getManagerList(\"";
    pagination += dealerId;
    pagination += "\",";
    pagination += (page2 + 1) + ");'>下一页 »</a></li>";
   }
   pagination += "<li><a href='javascript:getManagerList(\"";
   pagination += dealerId;
   pagination += "\",";
   pagination += (pageCount2 - 1) + ");'>« 尾页</a></li>";
   $('#pagination').empty();
   $('#pagination').append(pagination);
   $('#personAddModel').modal('show');
  }
  }
 );
}
</script> 

三、模态框

<div style="display:none;" class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">
 <div class="modal-dialog modal-lg">
  <div class="modal-content" id="personAddModelContent">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <span class="modal-header-title" id="myModalLabel">经营人员</span>
   </div>
  <div class="modal-body">
   <div class="row">
    <div class="col-xs-12" id="managerList">
    </div>
   </div>
  </div>
  <div class="modal-footer" id="pagination">
  </div>
 </div>
</div> 

四、controller

@RequestMapping(value = "manager", method =RequestMethod.GET)
 public @ResponseBody ModelAndView queryManager(Model model
    , @RequestParam(defaultValue = "0")int page2
    , @RequestParam(defaultValue = "9")int pageSize2
    , @RequestParam(required = false, defaultValue = "")String dealerId
    , String macAddress){
  FastJsonJsonView view = new FastJsonJsonView();
  if(macAddService.checkMacAddress(macAddress, "E")==true){
   String uploadDir = this.localUploadTools.getPreviewDir() + "/dealerUpload";
   PaginationSupport<ManagePersonForTouchScreenVO> managerVOPS = dealerService.queryManager(dealerId, page2, pageSize2);
   view.addStaticAttribute("page2", page2);
   view.addStaticAttribute("uploadDir", uploadDir);
   view.addStaticAttribute("managerList", managerVOPS.getObject());
   view.addStaticAttribute("stor_no2", managerVOPS.getTotalCount());
   view.addStaticAttribute("pageCount2", managerVOPS.getPageCount());
  }
  return new ModelAndView(view);
 } 

好了,下面给大家介绍了bootstrap模态框 ajax分页实例代码,先给大家展示下效果图:

效果图:

上干货:

/**
 * ajax分页
 */
$(function(){
 $(".modal-body").find(".pagination").on("click","li",function(){
 var totalPage=$(".modal-body").find(".pagination").find(".lilength").length;
 var pageNo=$(this).find("a").text();
 var beforePage="";
 //获取之前选中的值
 $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).hasClass("active")){
  beforePage=$(this).find("a").text();
  }
 });
 //alert(beforePage);
 if($(this).find("a").text()=="首页"){
  removeClass();
  $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).find("a").text()=="1"){
   $(this).addClass("active");
  }
  getPlanFy("1");
  });
 }else if($(this).find("a").text()=="上页"){
  if(beforePage==1){
  showMessage("已经是第一页了!")
  }else{
  var dqy=parseInt(beforePage)-1;
  $(".modal-body").find(".pagination").find("li").each(function(){
   if($(this).find("a").text()==dqy.toString()){
   $(this).addClass("active");
   }else{
   $(this).removeClass("active");
   }
  });
  getPlanFy(dqy);
  }
 }else if($(this).find("a").text()=="下页"){
  if(beforePage==totalPage){
  showMessage("已经是最后一页了!")
  }else{
  var dqy=parseInt(beforePage)+1;
  $(".modal-body").find(".pagination").find("li").each(function(){
   if($(this).find("a").text()==dqy.toString()){
   $(this).addClass("active");
   }else{
   $(this).removeClass("active");
   }
  });
  getPlanFy(dqy);
  }
 }else if($(this).find("a").text()=="末页"){
  removeClass();
  $(".modal-body").find(".pagination").find("li").each(function(){
  if($(this).find("a").text()==totalPage){
   $(this).addClass("active");
  }
  });
  getPlanFy(totalPage);
 }else{
  removeClass();
  $(this).addClass("active");
  getPlanFy(pageNo);
 }
 });
// $(".table").find("tbody").on("click",".showMsgDetail",function(){
// var msg=$(this).find("a").attr("name");
// showMagDetail(msg);
// });
 $(".addbutton").click(function(){
 $("#savePlanmodal").removeAttr("name");
 $("#planIdsUpdate").val("");
 });
});
/**
 * 弹窗
 */
function showMessage(content){
 $.alert({
  title: '提示',
  content: content,//支持html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  closeAnimation: 'zoom',
  buttons: {
  okay: {
   text: '确定',
   btnClass: 'btn-primary'
  }
  }
 });
}
/**
 * 移除css
 */
function removeClass(){
 $(".modal-body").find(".pagination").find("li").each(function(){
 $(this).removeClass("active");
 });
}
function getPlanFy(pageNo){
 var pageSize=10;
 $.post(""+otherPath+"/fault-studio/getInpectPlanList.action",
  {"pageNo":pageNo,"pageSize":pageSize},function(data){
   $("#inspectionPlan").find(".modal-body").find("table").find("tbody").html("");
   $("#inspectionPlan").find(".modal-body").find(".pagination").html("");
  var appendHtml="";
  if(data.items!=null && data.items.length>0){
  $.each(data.items,function(i,item){
   var number=parseInt(i)+1;
   appendHtml+="<tr>" +
    "<td align='center'>"+number+"</td>" +
    "<td><a>"+item[1]+"</a></td>" +
    "<td>"+item[2]+"</td>"+
    "<td>"+item[3]+"</td>"+
    "<td><a name='"+item[0]+"' onclick='updatePlan(this)'>修改</a> <a lang='"+item[0]+"' onclick='delPlan(this)'>删除</a></td>"
    "</tr>"
  });
  $("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);
  var paginHtml="";
  if(isNotTirmpagin(data.totalPage) && data.totalPage>0){
   paginHtml+="<li><a>首页</a></li>" +
    "<li><a>上页</a></li>";
   for(var j=0;j<data.totalPage;j++){
   var page=parseInt(j)+1;
   if(page==pageNo){
    paginHtml+="<li class='lilength active'><a>"+page+"</a></li>";
   }else{
    paginHtml+="<li class='lilength'><a>"+page+"</a></li>";
   }
   }
   paginHtml+="<li><a>下页</a></li>" +
    "<li><a>末页</a></li>";
   $("#inspectionPlan").find(".modal-body").find(".pagination").append(paginHtml);
  }
  }
 });
}
function updatePlan(obj){
 var planId=obj.name;
 $.post(""+otherPath+"/fault-studio/getPlanById.action",{"id":planId},function(data){
 if(data.result=="success"){
  $(".addbutton").click();
  var item=data.items;
  $("#planName").val(item.name);
  $("#planTitle").val(item.inspectTitle);
  $("#showTime").val(item.inspectTime);
  var module_name=item.module_name;
  var nameArray=module_name.split("&");
  var moudleIdArray=item.inspectContent.split("&");
  var nameHtml="";
  if(nameArray!=null && nameArray.length>0){
  for(var i=0;i<nameArray.length;i++){
   if(isNotTirmpagin(nameArray[i])){
   nameHtml+="<li id='"+moudleIdArray[i]+"'>"+nameArray[i]+"</li>";
   }
  }
  }
  $(".inspectContent").append(nameHtml);
  var inspectTimeArray=item.inspectTime.split("&");
  var timeHtml="";
  if(inspectTimeArray!=null && inspectTimeArray.length>0){
  for(var j=0;j<inspectTimeArray.length;j++){
   if(isNotTirmpagin(inspectTimeArray[j])){
   timeHtml+="<li>"+inspectTimeArray[j]+"</li>";
   }
  }
  }
  $(".inspectionChooseTime").append(timeHtml);
  $("#savePlanmodal").attr("name","update");
  $("#planIdsUpdate").val(planId);
 }
 });
}
function delPlan(obj){
 var planId=obj.lang;
 sureConfirm("提示","确定删除吗?",planId);
}
function showMagDetail(msg){
 $.alert({
  title: '提示',
  content: msg,//支持html
  icon: 'fa fa-rocket',
  animation: 'zoom',
  closeAnimation: 'zoom',
  buttons: {
  okay: {
   text: '确定',
   btnClass: 'btn-primary'
  }
  }
 });
}
function sureConfirm(tip,msg,planId){
 $.confirm({
 title: tip,
 content: msg,
 icon: 'fa fa-rocket',
 animation: 'zoom',
 closeAnimation: 'zoom',
 buttons: {
  confirm: {
  text: '确定',
  btnClass: 'btn-primary',
  action:function(){
   $.post(""+otherPath+"/fault-studio/delInspectPlan.action",{"id":planId},function(data){
   if(data.items=="success"){
    showMagDetail("删除成功");
    getPlanFy("1");
   }else{
    showMagDetail(data.msg);
   }
   });
  }
  },
  cancle: {
  text: '取消',
  action:function(){
   return false;
  }
  }
 },
 });
}
function isNotTirmpagin(obj){
 if(obj!=null && obj!='' && obj!=undefined){
 return true;
 }else{
 return false;
 }
} 

以上所述是小编给大家介绍的bootstrap模态框 分页的实例代码 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Spring Boot(五)之跨域、自定义查询及分页

    跨域 前面我们初步做出了一个可以实现受保护的 REST API,但是我们没有涉及一个前端领域很重要的问题,那就是跨域请求( cross-origin HTTP request ).先来回顾一些背景知识: 跨域请求 定义:当我们从本身站点请求不同域名或端口的服务所提供的资源时,就会发起跨域请求. 例如最常见的我们很多的 css 样式文件是会链接到某个公共 CDN 服务器上,而不是在本身的服务器上,这其实就是典型的一个跨域请求.但浏览器由于安全原因限制了在脚本( script )中发起的跨域 HTT

  • 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,非DataTable Search 代码 HTML代码 查询条件代码 <!-- 查询.添加.批量删除.导出.刷新 --> <div class="row-fluid"> <di

  • SpringBoot JPA 表关联查询实例

    今天给大家介绍一下如何利用JPA实现表关联查询. 今天给大家举一个一对多的关联查询,并且是使用JPA原生的findBy语句实现的. 例子中总共有两个实体类,一个是Floor(商品楼层类),另一个是FloorContent(商品楼层内容表).下面看两张表的源代码: Floor类: package cms.model; import cms.model.base.BaseDomain; import org.hibernate.annotations.GenericGenerator; import

  • SpringBoot多表联查(测试可用)

    今天在写的时候,遇到了多表查询的问题,网上有好多可以说是好烦,对于习惯了写sql的我来说,简直... 好啦,直接分享代码吧. public interface FieldValueDao extends JpaRepository<FieldValue,Integer> { @Query("select fv from FieldValue fv where field_id IN (select id from Field where table_id=:tableId) ORDE

  • Spring Boot中防止递归查询的两种方式

    本文主要给大家介绍了关于Spring Boot防止递归查询的相关内容,这只是一个小提醒,这里有两种方式,很简单,下面来看看详细的介绍: 1.在application.properties中配置 #懒加载配置 spring.jpa.properties.hibernate.enable_lazy_load_no_trans=true 2.在entity中添加注解 在关联对象上添加@JsonBackReference 在类上添加@JsonIgnoreProperties("roles")

  • AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma

  • BootStrap实现邮件列表的分页和模态框添加邮件的功能

    废话不多说具体代码如下所示: package com.rc.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.ht

  • Bootstrap模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • bootstrap模态框消失问题的解决方法

    小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题,希望对大家有帮助. 状况一:bootstrap模态框瞬间消失解决 bootstrap模态框挺好,但这方面的例子很少,都是官方的代码,网上没有一点新的东西.比如,save changes,即点击确认后如何处理?没有例子.只有取消close的功能.我的需求是这样,点击一个链接,传一个id,打开模态框,进行输入.单选.列表选择等,点模态框确认,然后连同刚才的id.模态框中的各种值,一起提交到后台处理. 第一步:用链接传id并打

  • 解决bootstrap模态框数据缓存的问题方法

    问题背景 第一步进行新增验证 第二步进行修改模态框 验证信息没有消除 且表单数据被缓存 模态框代码:新增修改共用一个模态框 <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="

  • BootStrap 模态框实现刷新网页并关闭功能

    方法与实现 hide.bs.modal,当调用 hide 实例方法时触发. $('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal,当模态框完全对用户隐藏时触发. $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... }) 源码示例 $('#confirmRevokeOrder').on('hidden.bs.

  • BootStrap模态框不垂直居中的解决方法

    本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v

  • bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码

    模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发模态框不会乱掉. HTML代码如下: <!--最外层包裹的模态框--> <div class="modal fade" id="outermost" tabindex="-1" role="dialog" ari

  • Bootstrap模态框案例解析

    一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模

  • Bootstrap 模态框(Modal)带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现带参数的传递,查看数据的唯一性.例如下面窗体:点击任意一个模态框("回复"按钮),如果不做任何处理,则会出现回复混淆,甚至程序出错的情况. 为了实现其回复的唯一性和带参传值的功能,需要做以下处理 实现的效果: 总结 以上所述是小编给大家介绍的Bootstrap 模态框(Modal)带参数传

随机推荐