ブートストラップモーダルボックスのページングクエリ機能をAjaxで実装する方法

今回は、bootstrapモーダルボックスページングクエリ関数を実装するためのajaxの実装方法を説明します。ajaxを使用してブートストラップモーダルボックスページングクエリ関数を実装するための注意事項は何ですか? 以下は実際的なケースです。見て。

1. レンダリング

2. モーダルボックス

4、コントローラー

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> "; 
   } 
   $('#managerList').empty(); 
   $('#managerList').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>"; 
   $('#pagination').empty(); 
   $('#pagination').append(pagination); 
   $('#personAddModel').modal('show'); 
  } 
  } 
 ); 
} 
</script>

わかりました、わかりました、

以下では、ブートストラップ モーダル ボックスの Ajax ページングのサンプル コードを紹介します まず、レンダリングを示します。この記事では、この方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

データを追加する Ajax ドロップダウン リスト

Ajax クロスドメイン アクセス中の Cookie 損失の問題を解決する方法

以上がブートストラップモーダルボックスのページングクエリ機能をAjaxで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。