一 、效果图
二、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 "; pagination += dealerid; pagination += "","; pagination += 0 + ");'>« 首页</a></li>"; if(page2>0){ pagination += "<li><a "; 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 "; pagination += dealerid; pagination += "","; pagination += j + ");'>"+(j+1)+"</a></li>"; }else{ pagination += "<li><a "; pagination += dealerid; pagination += "","; pagination += j + ");'>"+(j+1)+"</a></li>"; } } } if(page2<pagecount2-1){ pagination += "<li><a "; pagination += dealerid; pagination += "","; pagination += (page2 + 1) + ");'>下一页 »</a></li>"; } pagination += "<li><a "; 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); }
好了,下面给大家介绍了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;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; } }
以上所述是小编给大家介绍的bootstrap模态框 分页的实例代码 ,希望对大家有所帮助