AJAX + SpringMVC implémente la fonction de requête de pagination de la boîte modale bootstrap-js tutoriel-php.cn

Maison

interface Web

js tutoriel

AJAX + SpringMVC implémente la fonction de requête de pagination de la boîte modale bootstrap

亚连

May 23, 2018 am 09:44 AM

ajax bootstrap

Cet article présente principalement AJAX + SpringMVC pour implémenter la fonction de requête de pagination de la boîte modale bootstrap, ainsi que l'exemple de partage de code de pagination ajax de la boîte modale. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer. 🎜>

1. Rendu

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+="<p class=&#39;col-xs-4 demo1_box&#39;>"; 
    rs+="<img width=&#39;200px&#39; height=&#39;130px&#39; src=&#39;"; 
    rs+=path; 
    rs+="&#39;>"; 
    rs=rs+"<p>"+name+"</p></p> "; 
   } 
   $(&#39;#managerList&#39;).empty(); 
   $(&#39;#managerList&#39;).append(rs); 
   var page2=data.page2; 
   var stor_no2=data.stor_no2; 
   var pageCount2=data.pageCount2; 
   var pagination = ""; 
   pagination+="<ul class=&#39;pagination pager_cus&#39;>"; 
   pagination=pagination+"<li><a>第 "+(page2 + 1); 
   pagination=pagination+" 页/共 "+pageCount2+" 页</a></li>"; 
   pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
   pagination += dealerId; 
   pagination += "\","; 
   pagination += 0 + ");&#39;>« 首页</a></li>"; 
   if(page2>0){ 
    pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
    pagination += dealerId; 
    pagination += "\","; 
    pagination += (page2 - 1) + ");&#39;>« 上一页</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=&#39;active&#39;><a href=&#39;javascript:getManagerList(\""; 
      pagination += dealerId; 
      pagination += "\","; 
      pagination += j + ");&#39;>"+(j+1)+"</a></li>"; 
     }else{ 
      pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
      pagination += dealerId; 
      pagination += "\","; 
      pagination += j + ");&#39;>"+(j+1)+"</a></li>"; 
     } 
    } 
   } 
   if(page2<pageCount2-1){ 
    pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
    pagination += dealerId; 
    pagination += "\","; 
    pagination += (page2 + 1) + ");&#39;>下一页 »</a></li>"; 
   } 
   pagination += "<li><a href=&#39;javascript:getManagerList(\""; 
   pagination += dealerId; 
   pagination += "\","; 
   pagination += (pageCount2 - 1) + ");&#39;>« 尾页</a></li>"; 
   $(&#39;#pagination&#39;).empty(); 
   $(&#39;#pagination&#39;).append(pagination); 
   $(&#39;#personAddModel&#39;).modal(&#39;show&#39;); 
  } 
  } 
 ); 
} 
</script>

Copier après la connexion

3.Boîte modale

<p style="display:none;" class="modal fade bs-example-modal-lg in" id="personAddModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false"> 
 <p class="modal-dialog modal-lg"> 
  <p class="modal-content" id="personAddModelContent"> 
   <p 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> 
   </p> 
  <p class="modal-body"> 
   <p class="row"> 
    <p class="col-xs-12" id="managerList"> 
    </p> 
   </p> 
  </p> 
  <p class="modal-footer" id="pagination"> 
  </p> 
 </p> 
</p>

Copier après la connexion

4. contrôleur

@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); 
 }

Copier après la connexion

D'accord,

Ce qui suit vous présente l'exemple de code de pagination ajax de la boîte modale bootstrapTout d'abord, je vais vous montrer le rendu :

Rendu :

<. 🎜 >

Voici les trucs secs :

/** 
 * 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: &#39;提示&#39;, 
  content: content,//支持html 
  icon: &#39;fa fa-rocket&#39;, 
  animation: &#39;zoom&#39;, 
  closeAnimation: &#39;zoom&#39;, 
  buttons: { 
  okay: { 
   text: &#39;确定&#39;, 
   btnClass: &#39;btn-primary&#39; 
  } 
  } 
 }); 
} 
/** 
 * 移除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=&#39;center&#39;>"+number+"</td>" + 
    "<td><a>"+item[1]+"</a></td>" + 
    "<td>"+item[2]+"</td>"+ 
    "<td>"+item[3]+"</td>"+ 
    "<td><a name=&#39;"+item[0]+"&#39; onclick=&#39;updatePlan(this)&#39;>修改</a> <a lang=&#39;"+item[0]+"&#39; onclick=&#39;delPlan(this)&#39;>删除</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=&#39;lilength active&#39;><a>"+page+"</a></li>"; 
   }else{ 
    paginHtml+="<li class=&#39;lilength&#39;><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=&#39;"+moudleIdArray[i]+"&#39;>"+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: &#39;提示&#39;, 
  content: msg,//支持html 
  icon: &#39;fa fa-rocket&#39;, 
  animation: &#39;zoom&#39;, 
  closeAnimation: &#39;zoom&#39;, 
  buttons: { 
  okay: { 
   text: &#39;确定&#39;, 
   btnClass: &#39;btn-primary&#39; 
  } 
  } 
 }); 
} 
function sureConfirm(tip,msg,planId){ 
 $.confirm({ 
 title: tip, 
 content: msg, 
 icon: &#39;fa fa-rocket&#39;, 
 animation: &#39;zoom&#39;, 
 closeAnimation: &#39;zoom&#39;, 
 buttons: { 
  confirm: { 
  text: &#39;确定&#39;, 
  btnClass: &#39;btn-primary&#39;, 
  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: &#39;取消&#39;, 
  action:function(){ 
   return false; 
  } 
  } 
 }, 
 }); 
} 
function isNotTirmpagin(obj){ 
 if(obj!=null && obj!=&#39;&#39; && obj!=undefined){ 
 return true; 
 }else{ 
 return false; 
 } 
}

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. vous sera utile à l'avenir.

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Will R.E.P.O. Vous avez un jeu croisé?

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7554

Tutoriel CakePHP

1382

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment obtenir la barre de recherche bootstrap Apr 07, 2025 pm 03:33 PM

Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment faire le centrage vertical de bootstrap Apr 07, 2025 pm 03:21 PM

Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Que faire si la table bootstrap utilise Ajax pour faire grimper les données Apr 07, 2025 am 11:54 AM

Solutions à la table Bootstrap Code Bootstrap lors de l'utilisation de AJAX pour obtenir des données à partir du serveur: 1. Définissez le codage de caractères correct du code côté serveur (tel que UTF-8). 2. Définissez l'en-tête de demande dans la demande AJAX et spécifiez le codage des caractères accepté (accepte-charge). 3. Utilisez le convertisseur "Unescape" de la table bootstrap pour décoder l'entité HTML échappée en caractères originaux.

See all articles