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 相关文章推荐
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
javascript生成大小写字母
Jul 03 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
操作Oracle的php类
2006/10/09 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
node.js中的require使用详解
2014/12/15 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
法律专业应届生自荐信范文
2014/01/06 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
民政工作个人总结
2015/02/28 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Go语言编译原理之源码调试
2022/08/05 Golang