ajax分页效果(bootstrap模态框)


Posted in Javascript onJanuary 23, 2017

ajax分页效果图:

ajax分页效果(bootstrap模态框)

上干货:

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

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

Javascript 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
react-native使用leanclound消息推送的方法
Aug 06 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
jquery easyui DataGrid简单示例
Jan 23 #Javascript
浅谈javascript的闭包
Jan 23 #Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 #Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 #Javascript
Node.js Express 框架 POST方法详解
Jan 23 #Javascript
js 颜色选择插件
Jan 23 #Javascript
JavaScript常用正则函数用法示例
Jan 23 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python daemon守护进程实现
2016/08/27 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python3中列表list合并的四种方法
2019/04/19 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
经典c++面试题四
2015/05/14 面试题
What is view? why do we have view?
2012/06/22 面试题
中国央视网签名寄语
2014/01/18 职场文书
新店开张活动方案
2014/08/24 职场文书
政协委员个人总结
2015/03/03 职场文书
党员证明信
2015/06/19 职场文书
详解NodeJS模块化
2021/06/15 NodeJs