ajax分页效果(bootstrap模态框)

标签:活动介绍    日期:2019-04-09 19:43    录入:美娱国际平台注册    浏览:

  

[ajax,分页,模态框]ajax分页效果(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+="
  • 首页
  • " +  "
  • 上页
  • ";  for(var j=0;j"+page+"";  }else{  paginHtml+="
  • "+page+"
  • ";  }  }  paginHtml+="
  • 下页
  • " +  "
  • 末页
  • ";  $("#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[i]+"";  }  }  }  $(".inspectContent").append(nameHtml);  var inspectTimeArray=item.inspectTime.split("&");  var timeHtml="";  if(inspectTimeArray!=null && inspectTimeArray.length>0){  for(var j=0;j"+inspectTimeArray[j]+"";  }  }  }  $(".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;  }  }  
      
      

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

      

    ★★★小编:
    美娱国际 整理文章,欢迎大家转载 ★★★
    上一篇:使用requestAnimationFrame实现js动画性能好
    下一篇:没有了
    相关文章阅读