这篇文章主要介绍了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"+name+" ";
}
$('#managerList').empty();
$('#managerList').append(rs);
var page2=data.page2;
var stor_no2=data.stor_no2;
var pageCount2=data.pageCount2;
var pagination = "";
pagination+="";
pagination=pagination+"- 第 "+(page2 + 1);
pagination=pagination+" 页/共 "+pageCount2+" 页
";
pagination += "- « 首页
";
if(page2>0){
pagination += "- « 上一页
";
}
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"+(j+1)+"";
}else{
pagination += "- "+(j+1)+"
";
}
}
}
if(page2下一页 »";
}
pagination += "- « 尾页
";
$('#pagination').empty();
$('#pagination').append(pagination);
$('#personAddModel').modal('show');
}
}
);
}
三、模态框
经营人员
四、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 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+="" +
""+number+" " +
""+item[1]+" " +
""+item[2]+" "+
""+item[3]+" "+
"修改 删除 "
" "
});
$("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml);
var paginHtml="";
if(isNotTirmpagin(data.totalPage) && data.totalPage>0){
paginHtml+="上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
设置Access-Control-Allow-Origin实现跨域访问
