无刷新分页
整体思路:
用户点击上一页、下一页,点击触发事件,根据当前页码,拼接ajax请求参数,发送请求;
后台接受请求及参数,链接数据库获取数据,处理数据后返回前台;
前台接到数据后,删除旧数据,遍历添加新数据;
前台代码:
<body>
<a href="" id="s">上一页</a>
<a href="" id="x">下一页</a>
<div id="d"></div>
</body>
<script src="ajax.js"></script>
<script>
var p = 1;
$.get('./0.8.php?p=' + p, function (d) {
htmls(d);
}, 'json');
$('#x')[0].onclick = function () {
$.get('./0.8.php?p=' + ++p, function (d) {
htmls(d);
}, 'json');
return false;
}
$('#s')[0].onclick = function () {
$.get('./0.8.php?p=' + --p, function (d) {
htmls(d);
}, 'json');
return false;
}
function htmls(d) {
var tables = '<table border="1">';
for (var i = 0; i < d.length; i++) {
tables += '<tr>';
tables += '<td>' + d[i].name + '</td>';
tables += '<td>' + d[i].sex + '</td>';
tables += '<td>' + d[i].age + '</td>';
tables += '<td>' + d[i].city + '</td>';
tables += '</tr>';
}
tables += '</table>';
$('#d')[0].innerHTML = tables;
}
</script>
后台PHP代码:
mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');
//查询SQL
//获取数据总条数
$sql = "select count(*) as num from test";
$res = mysql_query($sql);
$row = mysql_fetch_assoc($res);
$count= $row['num'];//获取数据总条数
$psize = 3; //设置每页条数
//ceil 向上取整
$pcount = ceil($count/$psize);//最大页码数
//获取get传参,第几页数据
$page = isset($_GET['page'])?$_GET['page']:0;
if($page<1){ //页码小于1,则取1
$page =1;
}
if($page>$pcount){//页码大于最大数,则去最大数
$page = $pcount;
}
$offset = ($page-1)*$psize; //计算查询区间
$sql = "select * from test limit $offset,$psize";
$res = mysql_query($sql);
$data = [];
while ($row = mysql_fetch_assoc($res)) {
$data[] = $row;
}
//返回当前页码数
$data['p'] = $page;
echo json_encode($data);