ajax分页效果(bootstrap模态框)

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

}

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

时间: 2017-01-21

使用PHP+JQuery+Ajax分页的实现

为了锻炼下JQuery,决定自己动手写写分页 最终的效果如图: 点击某个字母后,下方显示以该字母为首字母的所有词语: 分页显示,每页显示15个词语,每组页码有20个,1-20/20-40--- 首先是在PHP文件中的分页Pager的相关代码 复制代码 代码如下: public function searchWordsByInitial() {               //从AJAX发出的URL中获得参数:用户点击的字母和点击的页码            $initial = htmlenti

php,ajax实现分页

自己总结了些屁经验 1.用ajax post数据到后台页面后,接着要重新连接数据库,别以为用之前的session连接过就可以了 2.为了处理返回乱码的问题,我添加了header("Content-Type:text/html;charset=GB2312");就可以正常显示了,后来在firefox下检验,却提示我下载这个网页,上网搜了不少资料,得到一个模糊的认识就是网页代码有语法错误,firefox为了安全起见不会直接显示而是提示下载,我重新检查了刚才那条语句,发现自己多写了个&quo

基于Jquery+Ajax+Json的高效分页实现代码

如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre

JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

JQuery+Ajax无刷新分页的实例代码

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

用jQuery中的ajax分页实现代码

功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur

jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

Ajax读取数据之分页显示篇实现代码

我觉得还是有必要把我的ajax分页呈现给大家.我先讲一下这个ajax分页的实现核心,然后我们再看实例效果.所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的.我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页.大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示

php+ajax实现无刷新分页的方法

本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` (   `id` int(10) NOT NULL auto_increment,   `username` varcha

jQuery DataTables插件自定义Ajax分页实例解析

一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

实例详解jQuery Mockjax 插件模拟 Ajax 请求

1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这

Bootstrap jquery.twbsPagination.js动态页码分页实例代码

Bootstrap风格的分页控件自适应的: 参考网址:分页参考文档 1.风格样式: 2.首先引入js文件jQuery.twbsPagination.js <span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 3.

JS 拦截全局ajax请求实例解析

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!

jQuery validate插件实现ajax验证重复的2种方法

本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

jQuery UI插件自定义confirm确认框的方法

本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

BootStrapTable服务器分页实例解析

项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页.之前遇到的问题时服务器分页,在服务器端接收的参数为null.查了资料发现少了参数 主要引入js <script type="text/javascript" src="<%=path%>/plugins/bootstrap-table/bootstrap-table.

jQuery Validate插件自定义验证规则的方法

作为一个有强迫症存在的人,最见不得就是不统一的格式,对不齐的代码.所以在对表单填写项进行validate插件验证时,有一些验证规则是根据实际需要个性化定制的.如果不扩展validate插件规则,就会导致验证提示的表现方式不同,这简直能逼死强迫症.所以我就查找了一下,validate插件果然也有能自定义验证规则的方法,简直是强迫症患者的救星.话不多说,我们来看看是如何自定义的吧. //该方法对提现金额进行判断,看账户中是否有足够的金钱提现 function check_price(){ //提现额

jquery select插件异步实时搜索实例代码

一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不足. 三.如何使用. 1.html和js <select id="unit"></select> <script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js">

jquery幻灯片插件bxslider样式改进实例

本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样式如下: 改造后的样式如下: 第一步:引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) -->  <script