使用AJAX实现分页
Fenye.html
<!DOCTYPE html>
<html>
<head>
<title>分页</title>
</head>
<script type="text/javascript">
/**
* AJAX
* 1.创建ajax对象
* 2.建立连接
* 3.判断ajax准备状态及状态码
* 4.发送请求
*/
function showList(pageNow){ //创建ajax对象
var xmlHttp = new XMLHttpRequest(); //建立连接
xmlHttp.open('get','./AJAX_Fenye.php?pageNow='+pageNow); //判断ajax准备状态及状态码
xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//alert(xmlHttp.readyState);
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
} //发送请求
xmlHttp.send(null);
} //默认显示第1页
window.onload = function(){ showList(1);
} </script>
<body>
<input type="text">
<div id="result">
<!-- 此处显示信息！ -->
</div>
</body>
</html>
Fenye.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX分页</title>
</head>
<body> <?php
//以下php代码可封装调用，参数为pageNow //链接数据库
@mysql_connect('localhost','root','');
@mysql_select_db('empmanage');
@mysql_query('set name utf8'); //获取总记录数
$rs = mysql_query('select count(*) from emp');
$rows = mysql_fetch_row($rs);
$recordCount = $rows[0]; //每页显示多少条pageSize
$pageSize = 5; //总页数 = 总记录/每页显示多少
$pageCount=ceil($recordCount/$pageSize); //获取当前页 三元运算 若不存在pageNow则默认显示第1页
$pageNow = isset($_GET['pageNow'])? $_GET['pageNow']:1; if ($pageNow < 1) {
$pageNow = 1;
}elseif ($pageNow > $pageCount) {
$pageNow = $pageCount;
} //起始位置 每页从第几条数据显示
$pageStart = ($pageNow-1)*$pageSize; //从哪条开始显示，限制每页显示几条
$sql = "select * from emp limit $pageStart,$pageSize"; //链接数据库
$rs = mysql_query($sql); //以上php代码可封装调用，参数为pageNow 返回查询到的数据$rs ?> <table bordercolor="green" border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>等级</th>
</tr> <?php
//循环取出数据
while ($rows = mysql_fetch_assoc($rs)) {
echo "
<tr>
<td>{$rows['id']}</td>
<td>{$rows['name']}</td>
<td>{$rows['email']}</td>
<td>{$rows['level']}</td>
</tr>
";
}
?>
<tr>
<td colspan='4'>
<?php
//分页页码 调用js中的showList()方法 此处$i=$pageNow
for ($i=1; $i <= $pageCount; $i++) {
echo "<a href = 'javascript:void(0)' onclick = 'showList($i)'>{$i}</a> ";
}
?>
</td>
</tr>
</table> </body>
</html>
使用AJAX实现分页的更多相关文章
- Ajax做分页
Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...
- Yii 框架ajax搜索分页
要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层
- 利用Linq + Jquery + Ajax 异步分页的实现
在Web显示的时候我们经常会遇到分页显示,而网上的分页方法甚多,但都太过于消耗带宽,所以我想到了用Ajax来分页,利用返回的Json来处理返回的数据, 大大简化了带宽的压力. 先说下思路,无非就是异步 ...
- 5.Hibernate实现全套增删改查和ajax异步分页
1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...
- PHP中使用jQuery+Ajax实现分页查询多功能操作
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- 2018.2.28 PHP中使用jQuery+Ajax实现分页查询多功能如何操作
PHP中使用jQuery+Ajax实现分页查询多功能如何操作 1.首先做主页Ajax_pag.php 代码如下 <!DOCTYPE html> <html> <head& ...
- js ajax php分页组件
github https://github.com/lihefen/pageList html页面 <!DOCTYPE html><html><head>< ...
- PHP+JQUEY+AJAX实现分页
HTML <div id="list"> <ul></ul> </div> <div id="pagec ...
- PHP+JQUEY+AJAX实现分页【转】
HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left ...
- jquery+ajax实现分页
var curPage = 1; //当前页码 var total,pageSize,totalPage; //总记录数,每页显示数,总页数 getData(1); $("#pagecoun ...
随机推荐
- [underscore源码学习]——`>>` 运算符和二分查找
这是一篇记录学习 underscore v0.0.5 的fragment,觉得有点意思,和大家分享一下. 先看_.sortedIndex的源码,它用来确定 obj 在 array中的位置(array升 ...
- ionic的基础学习（第一篇）
1.ioinc的头部与底部 1.Header 固定在屏幕的顶端的组件,可包含标题,左右的功能按钮.(提供很多颜色的样式,及调用不同的样式名,亦可自定义) bar-light,bar-stable,ba ...
- jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- 如何解决jade标签没有闭合，如input
最近用jade模板引擎编写html时发现input编译输出为<input>,而我想要的效果为<input/>, 如何解决呢,这时我们可以这样写: input/ ---& ...
- 数据输入——生成你需要的echart图(世界地图，气泡图)
上一篇文章介绍了:堆积柱状图.扇形图.嵌套环形图,现在来介绍一下:世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map ...
- Bloom分类法
美国教育心理学家Bloom将教育的目标分为六类,从低到高,依次是:知识(Knowledge).理解(comprehension).应用(application).分析(analysis).综合(syn ...
- webpack使用来打包前端代码
使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...
- linux 下screen 使用
screen命令的常规用法: screen -d -r:连接一个screen进程,如果该进程是attached,就先踢掉远端用户再连接. screen -D -r:连接一个screen进程,如果该进程 ...
- vue制作小程序--mpvue
mpvue是一个使用 Vue.js 开发小程序的前端框架 http://mpvue.com/ sass的使用 https://segmentfault.com/q/1010000014194954 n ...
- PHP-note
func_get_arg - Return an item from the argument list func_get_args - Returns an array comprising a f ...