AJAX + SpringMVC implement the pagination query function of the bootstrap modal box, springmvcbootstrap

AJAX + SpringMVC implement the pagination query function of the bootstrap modal box, springmvcbootstrap

I,

Ii. 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 demodomainbox'> "; 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_cu'> "; pagination = pagination + "<li> <a> NO." + (page2 + 1 ); pagination = pagination + "Page/total" + pageCount2 + "page </a> </li>"; pagination + = "<li> <a href = 'javascript: getManagerList (\ ""; pagination + = dealerId; pagination + = "\", "; pagination + = 0 + "); '> «homepage </a> </li> "; if (page2> 0) {pagination + =" <li> <a href = 'javascript: getManagerList (\ ""; pagination + = dealerId; pagination + = "\", "; pagination + = (page2-1) + "); '> «previous page </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) + "); '> next page» </a> </li> ";} pagination + = "<li> <a href = 'javascript: getManagerList (\" "; pagination + = dealerId; pagination + = "\","; pagination + = (pageCount2-1) + "); '> «last page </a> </li>"; $ (' # pagination '). empty (); $ ('# pagination '). append (pagination); $ ('# personAddModel '). modal ('show') ;}}) ;}</script>

3. modal box

<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"> operator </span> </div> <div class = "modal-body"> <div class = "row"> <div class = "col-xs-12" id = "managerList"> </div> </div> <div class = "modal-footer" id = "pagination"> </div>

Iv. 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);  } 

Okay,The following describes the ajax paging instance code of the bootstrap modal box.To show you:

:

Dry goods:

/*** Ajax paging */$ (function () {$ (". modal-body "). find (". pagination "). on ("click", "li", function () {var totalPage = $ (". modal-body "). find (". pagination "). find (". lilength "). length; var pageNo = $ (this ). find (""). text (); var beforePage = ""; // obtain the previously selected value $ (". modal-body "). find (". pagination "). find ("li "). each (function () {if ($ (this ). hasClass ("active") {beforePage = $ (this ). find (""). text () ;}}); // alert (beforePage); I F ($ (this ). find (""). text () = "Homepage") {removeClass (); $ (". modal-body "). find (". pagination "). find ("li "). each (function () {if ($ (this ). find (""). text () = "1") {$ (this ). addClass ("active") ;}getplanfy ("1") ;}) ;}else if ($ (this ). find (""). text () = "Previous Page") {if (beforePage = 1) {showMessage ("already the first page! ")} Else {var dqy = parseInt (beforePage)-1; $ (". modal-body "). find (". pagination "). find ("li "). each (function () {if ($ (this ). find (""). text () = dqy. toString () {$ (this ). addClass ("active");} else {$ (this ). removeClass ("active") ;}}); getPlanFy (dqy) ;}} else if ($ (this ). find (""). text () = "next page") {if (beforePage = totalPage) {showMessage ("is the last page! ")} Else {var dqy = parseInt (beforePage) + 1; $ (". modal-body "). find (". pagination "). find ("li "). each (function () {if ($ (this ). find (""). text () = dqy. toString () {$ (this ). addClass ("active");} else {$ (this ). removeClass ("active") ;}}); getPlanFy (dqy) ;}} else if ($ (this ). find (""). text () = "last page") {removeClass (); $ (". modal-body "). find (". pagination "). find ("li "). each (function () {if ($ (this ). find (""). text () = totalPa Ge) {$ (this ). addClass ("active") ;}}); getPlanFy (totalPage) ;}else {removeClass (); $ (this ). addClass ("active"); getPlanFy (pageNo) ;}}); // $ (". table "). find ("tbody "). on ("click ",". showMsgDetail ", function () {// var msg = $ (this ). find (""). attr ("name"); // showMagDetail (msg); //}); $ (". addbutton "). click (function () {$ ("# savePlanmodal "). removeAttr ("name"); $ ("# planIdsUpdate "). val ("") ;};});/*** pop-up window */ Function showMessage (content) {$. alert ({title: 'hprompt ', content: content, // html icon: 'fa-rocket', animation: 'zoom ', closeAnimation: 'zoom', buttons: {okay: {text: 'true', btnClass: 'btn-primary '}});}/*** remove css */function removeClass () {$ (". modal-body "). find (". pagination "). find ("li "). each (function () {$ (this ). removeClass ("active") ;});} function getPlanFy (pageNo) {var pageSize = 10; $. p Ost ("" + otherPath + "/fault-studio/getInpectPlanList. action ", {" pageNo ": pageNo," pageSize ": pageSize}, function (data) {$ (" # inspectionPlan "). find (". modal-body "). find ("table "). find ("tbody" pai.html (""); $ ("# inspectionPlan "). find (". modal-body "). find (". pagination "pai.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) '> modify </a> <a lang =' "+ item [0] +" 'onclick = 'delplan (this) '> Delete </a> </td> "" </tr> "}); $ (" # inspectionPlan "). find (". modal-bo Dy "). find ("table "). find ("tbody "). append (appendHtml); var paginHtml = ""; if (isNotTirmpagin (data. totalPage) & data. totalPage> 0) {paginHtml + = "<li> <a> homepage </a> </li>" + "<li> <a> previous page </a> </li> "; for (var j = 0; j <data. totalPage; j ++) {var page = parseInt (j) + 1; if (page = pageNo) {paginHtml + = "<li class = 'lilength activity'> <a>" + page + "</a> </li> ";} else {paginHtml + = "<li class = 'lilength '> <a>" + page + "</a> </li>" ;}} paginHtml + = "<Li> <a> next </a> </li>" + "<li> <a> last </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. in SpectTitle); $ ("# 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 ("prompt", "Are you sure you want to delete it? ", PlanId);} function showMagDetail (msg) {$. alert ({title: 'hprompt ', content: msg, // html icon: 'fa-rocket', animation: 'zoom ', closeAnimation: 'zoom', buttons: {okay: {text: 'true', btnClass: 'btn-primary '}});} function sureConfirm (tip, msg, planId) {$. confirm ({title: tip, content: msg, icon: 'fa fa-rocket ', animation: 'zoom', closeAnimation: 'zoom ', buttons: {confirm: {text: 'OK', btnClass: 'Btn-primary ', action: function () {$. post ("" + otherPath + "/fault-studio/delInspectPlan. action ", {" id ": planId}, function (data) {if (data. items = "success") {showMagDetail ("deleted successfully"); getPlanFy ("1");} else {showMagDetail (data. msg) ;}}}}, cancle: {text: 'cancel', action: function () {return false ;}}},});} function isNotTirmpagin (obj) {if (obj! = Null & obj! = ''& Obj! = Undefined) {return true;} else {return false ;}}

The above is the example code of bootstrap modal box pagination introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!