一 、效果图

二、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模态框 分页的实例代码 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# ajax  # 模态框  # bootstrap  # 模态框分页  # 分页  # 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询  # springboot+mongodb 实现按日期分组分页查询功能  # 在Spring Boot中使用Spring-data-jpa实现分页查询  # Spring Boot(五)之跨域、自定义查询及分页  # SpringBoot Jpa分页查询配置方式解析  # spring Boot查询数据分页显示的方法实例  # 首页  # 给大家  # 上页  # 下页  # 模态  # 末页  # 小编  # 好了  # 下一页  # 在此  # 上一页  # 尾页  # 第一页  # 所述  # 给我留言  # 感谢大家  # 先给  # 移除  # 疑问请 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： iOS UIView常见属性方法小结  北京的网站制作公司有哪些,哪个视频网站最好？  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  千库网官网入口推荐 千库网设计创意平台入口  如何挑选最适合建站的高性能VPS主机？  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel如何创建自定义Facades？（详细步骤）  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  教你用AI将一段旋律扩展成一首完整的曲子  js实现获取鼠标当前的位置  如何快速生成专业多端适配建站电话？  如何快速选择适合个人网站的云服务器配置？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  如何续费美橙建站之星域名及服务？  如何在IIS7上新建站点并设置安全权限？  长沙企业网站制作哪家好,长沙水业集团官方网站？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  如何在Ubuntu系统下快速搭建WordPress个人网站？  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Laravel如何生成API文档？（Swagger/OpenAPI教程）  如何自定义建站之星模板颜色并下载新样式？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  个人摄影网站制作流程,摄影爱好者都去什么网站？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  黑客如何利用漏洞与弱口令入侵网站服务器？  如何用y主机助手快速搭建网站？  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  JavaScript如何实现类型判断_typeof和instanceof有什么区别  Laravel如何实现文件上传和存储？（本地与S3配置）  WEB开发之注册页面验证码倒计时代码的实现  微信小程序 闭包写法详细介绍  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  利用vue写todolist单页应用  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  Python并发异常传播_错误处理解析【教程】  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  黑客如何通过漏洞一步步攻陷网站服务器？  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  Python文件流缓冲机制_IO性能解析【教程】