这篇文章主要介绍了ajax +springmvc 实现bootstrap模态框的分页查询功能，以及模态框 ajax分页实例代码分享，非常不错，具有参考借鉴价值，需要的朋友可以参考下
一 、效果图
二、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+="<p class='col-xs-4 demo1_box'>";
rs+="<img width='200px' height='130px' src='";
rs+=path;
rs+="'>";
rs=rs+"<p>"+name+"</p></p> ";
}
$('#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>
三、模态框
<p style="display:none;" class="modal fade bs-example-modal-lg in" id="personaddmodel" tabindex="-1" role="dialog" aria-labelledby="mylargemodallabel" aria-hidden="false">
<p class="modal-dialog modal-lg">
<p class="modal-content" id="personaddmodelcontent">
<p 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>
</p>
<p class="modal-body">
<p class="row">
<p class="col-xs-12" id="managerlist">
</p>
</p>
</p>
<p class="modal-footer" id="pagination">
</p>
</p>
</p>
四、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;
}
}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
ajax动态为下拉列表添加数据的实现方法
设置access-control-allow-origin实现跨域访问
ajax实现注册并选择头像后上传功能
以上就是ajax +springmvc 实现bootstrap模态框的分页查询功能的详细内容。