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

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 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(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> 

<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> 

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

/** 
 * 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;j<data.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;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("提示","确定删除吗?",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; 
 } 
}