这次给大家带来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 +=""; } $("#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(); //加载分页信息 })} "+data[k].AreaCode+" "+data[k].AreaName+" "+data[k].ParentAreaCode+"
登录后复制
处理页面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