模态框 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;
	}
	
}