我要评论本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论