Ajax 实现无刷新分页
用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数。
1.设置分页显示显示的样式,显示效果如下。
<style type="text/css"> *{ margin:0px auto; padding:0px; font-family:"微软雅黑"} .b3{ list-style:none; width:400px; height:30px; font-size:16px; text-align:center; line-height:30px; vertical-align:middle; position:relative} .b4{ width:50px; height:30px; float:left; font-size:20px; text-align:center; line-height:30px; vertical-align:middle} .b4:hover{ cursor:pointer; background-color:#FC6} #fy_shang{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px; float:left} #fy_xia{ font-size:16px; text-align:center; line-height:30px; vertical-align:middle; width:60px} #fy_shang:hover{ cursor:pointer; background-color:#FC6} #fy_xia:hover{ cursor:pointer; background-color:#FC6} </style>
2.页数显示代码容器,把这段代码放在</table>后面。
<!--分页开始--> <center> <ul class="pagination b3" id="fy_list"> </ul> <input type="hidden" value="1" id="fy_n" /> </center> <!--分页结束-->
3.ajax实现分页的代码
//ajax分页开始 $(document).ready(function(e) {JiaZai();var zys = 0; //页面加载数据 }) function JiaZai(){ var n = $("#fy_n").val();//页数显示框里面显示的页数$.ajax({url:"shipinguanlichuli.php",data:{n:n,gjz:""},//n是显示的页数。gjz是表格显示中有关键字查询,这里gjz传一个空值,意思是没有查询条件,查询所有的。type:"POST",dataType:"JSON",success: function(data){ var s =""; for(var i in data){s+="<tr><td><input type='checkbox' class='qx' value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('确定删除吗?')\">删除</a></td></tr>";//拼接表格显示内容}$("#a22").html(s);//把拼接好的字符串放到要显示的div里面。 }});//获取分页数(列表)$.ajax({url:"zyschuli3.php",type:"POST",dataType:"TEXT",success: function(data){ //总页数var ys = Math.ceil(data/15); zys = ys; var s = "<div><a id='fy_shang' class='b4'>上一页</a></div>";var dangqian = $("#fy_n").val(); //当前页数 for(var i=dangqian-2;i<=dangqian+2;i++){if(i>0 && i<=ys){if(dangqian==i){s+="<div class='b4' class='active'><a class='fy_zhong b4'>"+i+"</a></div>";}else{s+="<div class='b4'><a class='fy_zhong'>"+i+"</a></div>"}}}s += "<div><a id='fy_xia' class='b4'>下一页</a></div>";$("#fy_list").html(s);//给分页列表加事件JiaShiJian();}})//给分页列表加事件的方法function JiaShiJian(){$("#fy_shang").click(function(){ var n = $("#fy_n").val(); if(n>1){n--;}else{n=1;}$("#fy_n").val(n);//加载数据JiaZai();})$("#fy_xia").click(function(){var n = $("#fy_n").val(); if(n<zys){n++;}else{n=zys;}$("#fy_n").val(n);//加载数据JiaZai();})$(".fy_zhong").click(function(){var n = $(this).text();$("#fy_n").val(n);//加载数据JiaZai();})}
4.如果要加上关键字查询功能,现在表格上面加上关键字输入框。
关键字:<input id="guanjianzi" type="text" name="key" />
然后在js代码中多写一步,其实就是重复显示效果的js代码,里面加上条件。下面是分页显示+关键字查询所有的代码。
//ajax分页开始 $(document).ready(function(e) {JiaZai();var zys = 0; //页面加载数据 }) function JiaZai(){ var n = $("#fy_n").val();//页数显示框里面显示的页数$.ajax({url:"shipinguanlichuli.php",data:{n:n,gjz:""},//n是显示的页数。gjz是表格显示中有关键字查询,这里gjz传一个空值,意思是没有查询条件,查询所有的。type:"POST",dataType:"JSON",success: function(data){ var s =""; for(var i in data){s+="<tr><td><input type='checkbox' class='qx' value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('确定删除吗?')\">删除</a></td></tr>";//拼接表格显示内容}$("#a22").html(s);//把拼接好的字符串放到要显示的div里面。 }});//获取分页数(列表)$.ajax({url:"zyschuli3.php",type:"POST",dataType:"TEXT",success: function(data){ //总页数var ys = Math.ceil(data/15); zys = ys; var s = "<div><a id='fy_shang' class='b4'>上一页</a></div>";var dangqian = $("#fy_n").val(); //当前页数 for(var i=dangqian-2;i<=dangqian+2;i++){if(i>0 && i<=ys){if(dangqian==i){s+="<div class='b4' class='active'><a class='fy_zhong b4'>"+i+"</a></div>";}else{s+="<div class='b4'><a class='fy_zhong'>"+i+"</a></div>"}}}s += "<div><a id='fy_xia' class='b4'>下一页</a></div>";$("#fy_list").html(s);//给分页列表加事件JiaShiJian();}}) $("#guanjianzi").keyup(function(){var gjz = $(this).val();var n = $("#fy_n").val();$.ajax({url:"shipinguanlichuli.php",data:{n:n,gjz:gjz},type:"POST",dataType:"JSON",success: function(data){ var s =""; for(var i in data){s+="<tr><td><input type='checkbox' class='qx' value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('确定删除吗?')\">删除</a></td></tr>";}$("#a22").html(s); }});//获取分页数(列表)//var guanjianzi = $("#guanjianzi").val();$.ajax({url:"zyschuli3.php",data:{gjz:gjz},type:"POST",dataType:"TEXT",success: function(data){ //总页数var ys = Math.ceil(data/15); zys = ys; var s = "<li><a id='fy_shang' class='b4'>上一页</a></li>";var dangqian = $("#fy_n").val(); //当前页数for(var i=dangqian-2;i<=dangqian+2;i++){if(i>0 && i<=ys){if(dangqian==i){s+="<li class='active'><a class='fy_zhong b4'>"+i+"</a></li>";}else{s+="<li><a class='fy_zhong b4'>"+i+"</a></li>"}}}s += "<li><a id='fy_xia' class='b4'>下一页</a></li>";$("#fy_list").html(s);//给分页列表加事件JiaShiJian();}})});}//给分页列表加事件的方法function JiaShiJian(){$("#fy_shang").click(function(){ var n = $("#fy_n").val(); if(n>1){n--;}else{n=1;}$("#fy_n").val(n);//加载数据JiaZai();})$("#fy_xia").click(function(){var n = $("#fy_n").val(); if(n<zys){n++;}else{n=zys;}$("#fy_n").val(n);//加载数据JiaZai();})$(".fy_zhong").click(function(){var n = $(this).text();$("#fy_n").val(n);//加载数据JiaZai();})} </script>
5.处理页面1 shipinguanlichuli.php
<?php include("./DBDA.class.php"); $db = new DBDA(); $n = $_POST["n"];//获取页数显示框里面的值 $tg = ($n-1)*15;//每页显示15条数据,这里显示的就是当前页的15条数据。 $tj1 = " 1=1 ";//默认条件是个恒成立的,如果没有其他条件就是查询所有的。 if(!empty($_POST["gjz"]))//获取提交的关键字 {$gjz = $_POST["gjz"];$tj1 = " name like '%{$gjz}%' or details like '%{$gjz}%' or dprice like '%{$gjz}%' or dprice like '%{$gjz}%' ";//拼接查询条件 } $sqlsj = "select * from product where {$tj1} limit {$tg},15 "; echo json_encode($db->GuanQuery($sqlsj));
6.处理页面2 zyschuli3.php
<?php include("DBDA.class.php"); $db = new DBDA(); $tj1 = " 1=1 ";//默认条件是个恒成立的,如果没有其他条件就是查询所有的。 if(!empty($_POST["gjz"]))//获取提交的关键字 {$gjz = $_POST["gjz"];$tj1 = " name like '%{$gjz}%' or details like '%{$gjz}%' or dprice like '%{$gjz}%' or dprice like '%{$gjz}%' ";//拼接查询条件 } $sql ="select count(*) from product where {$tj1}";//查询符合条件的数据的总条数 $sj = $db->StrQuery($sql); echo $sj;
转载于:https://www.cnblogs.com/ZDPPU/p/6862294.html
Ajax 实现无刷新分页相关推荐
- jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...
- smarty+php+ajax 简单无刷新分页
简介 分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($ ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- ajax实现无刷新分页与提示
目录 封装dao方法 通用查询 分页sql语句定义oracle 语句dao 方法 Servlet界面获取数据代码 分页与提示共用界面 以及加载主页数据 Html界面代码 显示与搜索实现 分页下一页应用 ...
- Ajax实现无刷新分页效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
- jquery+ajax通用无刷新分页
前台自定义通用分页jquery插件 (一)框架:用jquery+ajax+struts1实现 自动创建行和列 持久层用的是abatis.数据库用的是MySQL. (二)sqlMap shangjia. ...
- php ajax无刷新分页源码,ajax实现无刷新分页(php)
投票结果 function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=ne ...
- AJAX之无刷新分页
准备导包+BuildPath 两个jar包---------放入lib文件夹中 JSON的jar包:fastjson-1.2.47.jar jQuery的类库-------放入js文件夹中 ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
最新文章
- 性能服务器解读,【MySQL数据库】第三章解读:服务器性能剖析(上)
- 精准扶贫电商重整流通-农业大健康·李玉庭: 谋定功能农产品
- 短文本分析----基于python的TF-IDF特征词标签自动化提取
- RetrieveFavicon 获取任何站点的 favicon
- SAP CRM content management中文件下载的调试
- java rabbitmq 并发_RabbitMQ消息中间件 高级篇二 高并发情况下保障消息投递可靠性...
- c语言三个月兴业,c语言输出2015年日历,要求三个月在一行...
- 最简单的基于FFMPEG的音频编码器(PCM编码为AAC)
- 通过Web.config中的configSections配置自己系统的全局常量
- 大型网站技术架构 学习总结一(基础了解)
- python获取当前时间戳_Python获取时间戳代码实例
- 彻底去除2345好压的广告方法
- PFC离散元与FLAC3D数值仿真核心技术与应用” 线上培训
- 〇、什么是全栈工程师
- html地图周边搜索,高德地图API实现定位、地点搜索和周边搜索(H5/Vue/微信小程序)...
- Ubuntu学习笔记6-ESP32接收并处理cmd_vel话题
- Vue中key属性的作用
- remind me of 2009
- 国内9大免费CDN汇总,除了加速乐,你还用过哪些?
- 几种常用方法教你解决QQ空间无法打开问题
热门文章
- IE盒模型和标准盒模型
- 两节点的最小公共祖先LCA
- Spring与Oauth2整合示例 spring-oauth-server
- 如何使用PHP编写daemon process
- 通过实现继承TabActivity并且实现TabContentFactory的方法创建选项卡的一点心得
- S5 Linux信息显示与搜索文件命令
- springboot2 虚拟路径设置_转载—springboot配置虚拟路径以外部访问
- linux解决windows应用程序,关于Linux下使用Windows应用程序的尝试总结
- Linux 中的进程管理
- mysql-日志浅析_mysql日志使用浅析