ホームページ > 記事 > ウェブフロントエンド > ブートストラップモーダルボックスのページングクエリ機能を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='col-xs-4 demo1_box'>"; rs+="<img width='200px' height='130px' src='"; rs+=path; rs+="'>"; 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='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>わかりました、わかりました、
以下では、ブートストラップ モーダル ボックスの Ajax ページングのサンプル コードを紹介します まず、レンダリングを示します。この記事では、この方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:データを追加する Ajax ドロップダウン リスト
Ajax クロスドメイン アクセス中の Cookie 損失の問題を解決する方法以上がブートストラップモーダルボックスのページングクエリ機能をAjaxで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。