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

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

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

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

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

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

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

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

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

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

基于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

php,ajax实现分页

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

用jQuery中的ajax分页实现代码

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

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

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

jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

ajax读取数据后使用jqchart显示图表的方法

本文实例讲述了ajax读取数据后使用jqchart显示图表的方法.分享给大家供大家参考.具体分析如下: 最近项目中需要显示出图表效果,原来收集到的图表插件终于有用武之地了. 但是和jqchart对比,还是有很多不同之处的. 实现效果: 我就对jqchart进行了重新编写. 首先要解决的是不显示x轴和y轴: //各DIV作成 // 取消标题显示 /* this.titleBox//Title =this.mkBoxElement('T', this.op.titleLeft,this.op.tit

Ajax读取数据到表格的实现代码

今天我们要讲的是:使用Ajax无刷新技术读取服务端多条数据,并将返回的数据显示到一个表格内.同时我还将展示,如何使用JavaScript脚本和Dom接口,来为网页创建一个表格 .将ajax请求的数据显示到该表格内. 本次的ajax实例效果中请求的服务端网页依然是:Web_ajax.Asp 该网页使用了Asp输出xml技术.如果你还不知道如何使用Asp输出xml请返回:"ajax开始准备篇" 提醒:在每篇ajax教程的实例开始之前,你必须查看当天的Web_ajax.asp文件中的数据结构.因为我们

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图:  1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to

对数据进行分页显示到table中的实现方法

我最先用jframe编程的时候写的比较简单,只是先查询到所有记录,再根据当前页码筛选出当前页的记录,返回的小集合可以直接显示到table上. import java.util.ArrayList; import java.util.List; import com.yu.entity.User; public class PageController { private List<User> bigList=new ArrayList<User>(); //大集合,从外界获取 pr

复杂检索数据并分页显示的处理方法

系统标题:复杂检索数据并分页显示的处理方法 系统功能:利用临时表检索数据库数据,然后分页显示的方法: 处理方法:采用临时表存放数据中间结果,根据中间结果显示数据           数据的显示采用隔行的方式处理 处理优点:对于复杂的查询,特别是涉及到多表的数据查询,如果直接使用查询条件,系统的           开销将很大,利用临时表把数据先保存,然后处理.这样对数据库的查询只要开销一次. 使用方法:只要把连接数据库的用户信息和数据表改变即可使用 <?   //连接数据库   $dbh =  

Ajax修改数据即时显示篇实现代码

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

jsp分页显示的实现代码

最近这几天在做JSP留言板设计的过程中,遇到了一个问题.先看一张截图: 这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦.不舒服的感受,所以,解决这个问题,通常采用分页显示的方法.       要把页面显示方式设计成这样的方式,通常需要用到这几个基本变量:pageSize(每个页面所显示的记录数).pageCount(一共有多少个页面).showPage(目前显示第几页).recordCount(总的记录数),为了方便理解,画了一张图: 如果

JSP分页显示的实例代码

1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称: startPoint 就是起始的位置 -1: numberPerPage 就是一页显示的条数. 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号评论: 2.jQuery load函数 (页面JS) MySQL的limit