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

2019-09-14 06:51:43于丽

一 、效果图

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