一 、效果圖

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