一 、效果图
二、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>
三、模态框
<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";
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);
}