婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能

AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能

熱門標簽:大眾點評400電話怎么申請 河間市地圖標注app 上海企業外呼系統價錢 電銷機器人 長春 怎樣在地圖標注文字 東平縣地圖標注app 地圖標注推銷坑人 立陶宛地圖標注 中國地圖標注不明確情況介紹表

一 、效果圖

二、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;imanagerList.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(start0){ 
    end=end-start; 
   } 
   if(end >(pageCount2-1)){ 
    end = pageCount2-1; 
    start=end -7; 
   } 
   for(var j=start;j=end;j++){ 
    if(j>-1  jpageCount2){ 
     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(page2pageCount2-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"; 
   PaginationSupportManagePersonForTouchScreenVO> 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;jdata.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;inameArray.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;jinspectTimeArray.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模態框 分頁的實例代碼 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

您可能感興趣的文章:
  • 基于SpringMVC+Bootstrap+DataTables實現表格服務端分頁、模糊查詢
  • springboot+mongodb 實現按日期分組分頁查詢功能
  • 在Spring Boot中使用Spring-data-jpa實現分頁查詢
  • Spring Boot(五)之跨域、自定義查詢及分頁
  • SpringBoot Jpa分頁查詢配置方式解析
  • spring Boot查詢數據分頁顯示的方法實例

標簽:玉樹 銅川 四川 營口 益陽 內江 本溪 遼寧

巨人網絡通訊聲明:本文標題《AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能》,本文關鍵詞  AJAX,+SpringMVC,實現,bootstrap,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能》相關的同類信息!
  • 本頁收集關于AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能的相關信息資訊供網民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    国产喂奶挤奶一区二区三区| 2023国产精品自拍| 国产欧美日韩精品a在线观看| 亚洲欧洲日产国码二区| 国产精品每日更新在线播放网址| 色婷婷久久久亚洲一区二区三区| 国产精品国产三级国产a | 欧美日韩成人综合在线一区二区| 久久爱www久久做| 91美女在线看| 成人精品一区二区三区中文字幕| 另类小说图片综合网| 青青草伊人久久| 美日韩一区二区三区| 九九九久久久精品| 国产一区二区福利| 在线亚洲精品福利网址导航| 日韩精品一卡二卡三卡四卡无卡| 欧美日韩一级二级| 欧美一区二区三区不卡| 日韩成人免费看| 日本韩国视频一区二区| 亚洲精品在线观看网站| 亚洲国产成人午夜在线一区| 另类小说一区二区三区| 337p亚洲精品色噜噜狠狠| 色诱亚洲精品久久久久久| 国产精品网站导航| 日韩欧美国产午夜精品| 国产成人免费视频一区| 亚洲大尺度视频在线观看| 美女一区二区三区在线观看| 国产盗摄一区二区三区| 亚洲精品一线二线三线无人区| xnxx国产精品| 91免费版在线| 久久久久久久久99精品| 国产精品1024| 国产三级精品视频| 国产精品18久久久久久久久久久久| 国产三级精品视频| 26uuu欧美| 中文成人av在线| 欧美一级xxx| 美女视频免费一区| 亚洲综合成人在线视频| 亚洲精品大片www| 中文字幕在线一区| 久久久精品国产免大香伊| 精品国产欧美一区二区| 亚洲精品国产品国语在线app| 日韩电影在线观看电影| 91久久精品网| 综合欧美一区二区三区| 国产大陆精品国产| 久久精品在线观看| 国产伦精品一区二区三区免费 | 欧美日韩dvd在线观看| 精品少妇一区二区三区视频免付费 | 国内精品久久久久影院一蜜桃| 国产精品1区二区.| 久久先锋影音av| 国产成人aaaa| 国产欧美一区视频| 不卡的av在线| 欧美精选一区二区| 日本va欧美va欧美va精品| 精品三级av在线| 91丝袜高跟美女视频| 日本不卡一区二区三区| 久久人人超碰精品| 欧美性受xxxx| 不卡的电影网站| 久久精品噜噜噜成人av农村| 一本一本大道香蕉久在线精品 | 亚洲综合色视频| 欧美一区永久视频免费观看| 狠狠色2019综合网| 一区二区三区中文字幕| 久久嫩草精品久久久久| 欧美日韩1区2区| 色婷婷综合久久久中文字幕| 久久爱另类一区二区小说| 亚洲一区二区欧美激情| 日本午夜精品视频在线观看| www激情久久| 欧美一级日韩一级| 91精品国产综合久久国产大片| 色综合久久天天| 91香蕉视频mp4| 97久久人人超碰| 本田岬高潮一区二区三区| 亚洲成人你懂的| 日韩av电影一区| 日韩和欧美一区二区三区| 日韩女同互慰一区二区| 丰满亚洲少妇av| 亚洲国产裸拍裸体视频在线观看乱了 | 欧美性生活大片视频| 欧美美女一区二区三区| 91精品国产综合久久久久久漫画 | 国产女主播一区| 国产精品久久久久久久蜜臀| 一区二区三区日韩欧美精品 | eeuss鲁片一区二区三区| 日韩精品一区二区三区四区| 国产精品18久久久久久久久 | 亚洲老司机在线| 成人免费视频视频| 精品在线亚洲视频| 成人欧美一区二区三区视频网页| 欧美一卡二卡三卡| 成人免费不卡视频| 日本va欧美va瓶| 国产亚洲1区2区3区| 欧美性感一区二区三区| 国产亚洲一区二区三区四区 | 在线一区二区三区四区五区| 亚洲国产一区在线观看| 成人免费在线视频| 欧美日韩一区二区不卡| 一区二区在线观看免费| 欧美日韩国产美| 国产69精品久久久久毛片| 国产人妖乱国产精品人妖| www一区二区| 日本丶国产丶欧美色综合| 精品一区二区三区在线视频| 日韩三级免费观看| 日韩丝袜美女视频| 亚洲精品在线观看视频| 久久综合视频网| 欧美激情综合在线| 精品一区二区三区在线视频| 日本三级亚洲精品| 国产精品一色哟哟哟| 国产精品一区二区免费不卡 | 欧美变态口味重另类| 国产视频911| 亚洲成a人v欧美综合天堂下载| 婷婷综合另类小说色区| 国产精品99久久久久久久女警| 一本大道久久精品懂色aⅴ| 7777精品伊人久久久大香线蕉超级流畅 | 精品中文字幕一区二区| 不卡在线观看av| 欧美区在线观看| 亚洲精品视频在线观看网站| 国产一区亚洲一区| 日韩精品一区二区三区三区免费 | 91在线观看污| 久久午夜电影网| 91精品国产品国语在线不卡| 91精品在线免费观看| 一区二区免费视频| 日本视频一区二区三区| 同产精品九九九| 欧美日韩不卡视频| 97久久超碰国产精品| 97久久人人超碰| 欧美国产精品一区二区三区| 蜜臀久久99精品久久久久久9 | 国产精品综合视频| 亚洲bdsm女犯bdsm网站| 欧美日韩一区不卡| 午夜电影网一区| 91精品国产91久久综合桃花| 91成人免费电影| 国产区在线观看成人精品 | 欧美色综合网站| 亚洲高清中文字幕| 日韩精品在线一区| 粉嫩一区二区三区在线看| 日本一区二区三区在线不卡| 高清视频一区二区| 色老汉av一区二区三区| 91精品国产麻豆国产自产在线 | 91.成人天堂一区| 日本一区二区视频在线| 欧美性受极品xxxx喷水| 日韩专区一卡二卡| 久久久久久久电影| 欧美一区二区三区免费在线看| 国产乱码字幕精品高清av| 亚洲综合在线电影| 国产日产亚洲精品系列| 91国偷自产一区二区开放时间 | 精品久久人人做人人爰| 国产美女视频一区| 蜜桃视频一区二区| 日韩影院精彩在线| 亚洲六月丁香色婷婷综合久久| xnxx国产精品| 欧美日韩精品欧美日韩精品一| 麻豆精品久久精品色综合| 亚洲乱码国产乱码精品精的特点 | 激情文学综合网| 日本一道高清亚洲日美韩| 一区二区三区成人| 国产欧美日韩一区二区三区在线观看|