ajax实现数据分页查询的步奏详解

这次给大家带来ajax实现数据分页查询的步奏详解,ajax实现数据分页查询的注意事项有哪些,下面就是实战案例,一起来看一下。

用ajax实现对数据库的查询以及对查询数据进行分页,供大家参考,具体内容如下

主页面代码

无标题文档.dangqian{ background-color:#69F}

代号 名称 父级代号

登录后复制

js代码

var page = 1; //当前页 定义一个变量 当前页Load(); //加载数据LoadXinXi(); //加载分页信息//查询$("#chaxun").click(function(){  page = 1;  Load(); //加载数据  LoadXinXi(); //加载分页信息 })function Load(){ var key = $("#key").val(); //查询条件  $.ajax({   url:"chuli.php",   data:{page:page,key:key},   type:"POST",   dataType:"JSON",   success: function(data){     var str = "";     for(var k in data)     {      str +=""+data[k].AreaCode+""+data[k].AreaName+""+data[k].ParentAreaCode+"";     }     $("#nr").html(str);//把数据返回表格    }  });}functionLoadXinXi(){ var str = ""; var minys = 1; var maxys = 1; var key = $("#key").val();  //查总页数 $.ajax({   async:false,   url:"zys.php",   data:{key:key},   type:"POST",   dataType:"TEXT",   success: function(d){     maxys = d;    }  });  str += "总共:"+maxys+"页  "; str += "上一页";  for(var i=page-2;i=minys && i<=maxys)  {   if(i==page)   {    str += ""+i+"  ";   }   else   {    str += ""+i+"  ";   }    } }   str += "下一页";   $("#xinxi").html(str);  //给上一页添加点击事件 $("#prev").click(function(){   page = page-1;   if(pagemaxys)   {    page=maxys;   }   Load(); //加载数据   LoadXinXi(); //加载分页信息  }) //给中间的列表加事件 $(".list").click(function(){   page = parseInt($(this).attr("bs"));   Load(); //加载数据   LoadXinXi(); //加载分页信息  })}

登录后复制

处理页面1

StrQuery($sql);echo ceil($zts/$num);

登录后复制

处理页面2

JSONQuery($sql);

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS实现AJAX局部刷新(附代码)

AJAX跨域请求JSONP获取JSON数据步骤详解(附代码)

以上就是ajax实现数据分页查询的步奏详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2776206.html

(0)
上一篇 2025年3月8日 14:45:24
下一篇 2025年3月8日 14:45:29

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在Ajax的请求中async:false与async:true有什么区别

    这次给大家带来在Ajax的请求中async:false与async:true有什么区别,在Ajax的请求中使用async:false与async:true的注意事项有哪些,下面就是实战案例,一起来看一下。 实例如下: function te…

    编程技术 2025年3月8日
    200
  • ajax如何实现不刷新的评论功能

    这次给大家带来ajax如何实现不刷新的评论功能,ajax实现不刷新评论功能的注意事项有哪些,下面就是实战案例,一起来看一下。 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容…

    2025年3月8日
    200
  • 使用ajax实现分页技术的步奏详解(附代码)

    这次给大家带来使用ajax实现分页技术的步奏详解(附代码),使用ajax实现分页技术的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax分页效果图如下: 首先,先看 HTML 代码和 CSS 代码,我们需要一个 table 和一个 …

    2025年3月8日
    200
  • Ajax与$.ajax的使用方法

    这次给大家带来Ajax与$.ajax的使用方法,使用Ajax与$.ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 实例一(Ajax请求基本创建格式): Ajax练习(GET,不考虑浏览器兼容性) function doReque…

    编程技术 2025年3月8日
    200
  • 用Ajax实现注册与头像上传功能

    这次给大家带来用Ajax实现注册与头像上传功能,Ajax实现注册与头像上传功能的注意事项有哪些,下面就是实战案例,一起来看一下。 在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就…

    2025年3月8日 编程技术
    200
  • Ajax下拉列表添加数据

    这次给大家带来Ajax下拉列表添加数据,Ajax下拉列表添加数据的注意事项有哪些,下面就是实战案例,一起来看一下。  1. 前台jsp,新建一个下拉控件 登录后复制 2. js部分,建一个function方法,利用ajax,指向 &#821…

    编程技术 2025年3月8日
    200
  • ajax怎样实现bootstrap模态框分页查询功能

    这次给大家带来ajax怎样实现bootstrap模态框分页查询功能,ajax实现bootstrap模态框分页查询功能的bootstrap有哪些,下面就是实战案例,一起来看一下。 一 、效果图 二、JS function getManager…

    2025年3月8日
    200
  • 新手必学的Ajax总结

    这次给大家带来新手必学的Ajax总结,新手必学Ajax总结有哪些,下面就是实战案例,一起来看一下。 一、Ajax简介、优劣势、应用场景以及技术 Ajax简介 : Asynchronous Javascript And XML (异步的Jav…

    2025年3月8日 编程技术
    200
  • ajax怎样申请手机号到数据库验证并且返回数据的状态值

    这次给大家带来ajax怎样申请手机号到数据库验证并且返回数据的状态值,ajax申请手机号到数据库验证并且返回数据状态值的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例为大家分享了ajax提交手机号去数据库的具体代码,并返回状态值…

    编程技术 2025年3月8日
    200
  • 处理ajax跨域请求parsererror错误

    这次给大家带来处理ajax跨域请求parsererror错误,处理ajax跨域请求parsererror错误的注意事项有哪些,下面就是实战案例,一起来看一下。 ajax请求报parsererror错误是很宽泛的概念,很多情况下都报这个错, …

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论