ajax分页效果（bootstrap模态框）

ajax分页效果图：上干货：/***ajax分页*/$(function(){$(".modal-body").find(".pagination").on("click","li",func

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; 
 } 
 
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。