• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

    一 、效果图

    二、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总结篇
    下一篇:Ajax动态为下拉列表添加数据的实现方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    AJAX +SpringMVC 实现bootstrap模态框的分页查询功能 AJAX,+SpringMVC,实现,bootstrap,