分页

来源：互联网发布：飞行员空姐知乎编辑：程序博客网时间：2024/05/16 01:20

<!DOCTYPE <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
<table border='1'>
<th>姓名</th><th>密码</th>
<?php
echo $_GET['page'];
$link=mysql_connect("localhost","root","root");
mysql_set_charset("utf8");
mysql_select_db(log,$link);

$page=isset($_GET['page'])?$_GET['page']:1;

$pagesize=4;
$maxpage=0;//最大页数
$maxrows=0;//总条数

$sq = "select count(*) from si_user";
$resul = mysql_query($sq);
$maxrows= mysql_result($resul, 0,0);
$maxpage = ceil($maxrows/$pagesize); //echo $maxrows;
if($page>$maxpage){
$page=$maxpage;
}
if($page<1){
$page=1;
}
$limit = " limit ".(($page-1)*$pagesize).",".$pagesize;
$sql="select * from si_user ".$limit;
$result=mysql_query($sql);
while ($rows=mysql_fetch_assoc($result)) {
echo "<tr>";
echo "<td>{$rows['uname']}</td>";
echo "<td>{$rows['password']}</td>";
echo "</tr>";
}

?>
</table>
<p>
<a href="#" onclick="f(<?= $pager['first_page']; ?>);">首页</a>
<a href="#" onclick="f(<?= $pager['prev_page']; ?>);">上一页</a>
<a href="#" onclick="f(<?= $pager['next_page']; ?>);">下一页</a>
<a href="#" onclick="f(<?= $pager['last_page']; ?>);">尾页</a>
</p>
<?php echo $page;//die();
echo json_encode(array("page" => $page));
?>

<script>
/**
* JS获取当前页码对应数据
* @param {int} page要获取的相应页数据
* @returns {undefined}
*/
function f(page) {
alert(1);
//要获取数据库数据必须向PHP请求并获取返回数据
/**
* 1、创建请求对象 XMLHttpRequest
* 2、打开（发送）请求地址
* 3、捕获状态的改变执行相应的操作如请求完成则获取返回值请求过程中输出等待信息
* 4、处理返回的数据
*/
var request = new XMLHttpRequest();
request.open("get", "./userData.php?page=" + page);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {//请求完成并且是成功的
var result = eval("(" + request.responseText + ")");
var rows = result.rows;
var pager = result.pager;
//组装数据部分
var _tab = '<table border="1"><tr><th>姓名</th><th>名称</th></tr>';
for (var i = 0; i < rows.length; i++) {
_tab += "<tr><td>" + rows[i].uname + "</td><td>" + rows[i].password + "</td></tr>";
}
_tab += "</table>";
//放入容器
document.getElementById("rows").innerHTML = _tab;
//组装地址栏
var _pager = "共" + pager.total_count + "条， " + pager.total_page + "页，当前：第 <b>" + pager.current_page + "</b> 页";
_pager += ' <a href="#" onclick="f(' + pager.first_page + ');">首页</a>';
_pager += ' <a href="#" onclick="f(' + pager.prev_page + ');">上一页</a>';
_pager += ' <a href="#" onclick="f(' + pager.next_page + ');">下一页</a>';
_pager += ' <a href="#" onclick="f(' + pager.last_page + ');">尾页</a>';
document.getElementById("pager").innerHTML = _pager;
} else {//请求过程中或发生错误

}
}
request.send(null);
}
</script>
</body>
</html>

0 0