<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax分页</title>
</head>
<body>
<a href="#" οnclick="s()">上一页</a>
<a href="#" οnclick="x()">下一页</a>
<div class="">
<table id="tb">
</table>
</div>
<!--记录当前页码数 -->
<input type="hidden" value="1" id="h">
</body>
<script type="text/javascript" src="ajax.js"></script>
<script>
function ajax(url){
$.get(url,function(msg){
//后去数据后,更新当前页码
$('h').value = msg.p;
$('tb').innerHTML = '<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>'
for(var i=0;i<3;i++){
var h = '<tr>';
h+='<td>'+msg[i].name+'</td>';
h+='<td>'+msg[i].age+'</td>';
h+='<td>'+msg[i].sex+'</td>';
h += '</tr>';
$('tb').innerHTML += h;
}
},'json');
}
//初始化页面获取数据
window.onload = function (){
ajax('09-7page.php?page=1');
}
//上一页数据获取
function s(){
//获取当前页,计算出上一页的页码数
var p = parseInt($('h').value);
//调用ajax发送请求
ajax('09-7page.php?page='+(p-1));
}
//下一页数据获取
function x(){
//获取当前页,计算出下一页的页码数
var p = parseInt($('h').value);
//调用ajax发送请求
ajax('09-7page.php?page='+(p+1));
}
</script>
</html>
后台代码:
<?php
mysql_connect('localhost','root','');
mysql_query('use test');
mysql_query('set names utf8');
//获取总条数
$sql = 'select count(*) as num from test';
$res = mysql_query($sql);
$row = mysql_fetch_assoc($res);
$count = $row['num'];
$psize = 3; //设置定义 每页条数
$pcunt = ceil($count/$psize);//计算总页数
//获取页码书,就是第几页的数据
$p = $_GET['page'];
if($p<1){
$p=1;
}
if($p>=$pcunt){
$p=$pcunt;
}
//每页数据从哪(第几条)开始获取 获取多少条数据
$l = ($p-1)*$psize;
$sql = "select * from test limit $l,$psize";
// echo $sql;
//获取指定数据,生成数组
$res = mysql_query($sql);
$data = [];
while($row = mysql_fetch_assoc($res)){
$data[] = $row;
}
$data['p'] = $p; //将当前页码数返回给前台
echo json_encode($data); //生成json字符串并返回