热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

ajax分页效果(bootstrap模态框)

这篇文章主要为大家详细介绍了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"; }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"; } } } $(".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; } }

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


    推荐阅读
    • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
    • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
    • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
    • 技术分享:从动态网站提取站点密钥的解决方案
      本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
    • CSS 布局:液态三栏混合宽度布局
      本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
    • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
      本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
    • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
    • 导航栏样式练习:项目实例解析
      本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
    • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
    • 深入理解Tornado模板系统
      本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
    • 深入理解Cookie与Session会话管理
      本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
    • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
    • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
    • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
    • 在Linux系统中配置并启动ActiveMQ
      本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
    author-avatar
    手机用户2502853201
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有