HTML 页面:
<!DOCTYPE html>
<html>
<head>
<title>jquery ajax分页</title>
</head>
<body>
<div>
<p>下面是获取的内容</p>
<ul id="data">
<!-- 这里是显示的内容 -->
</ul>
</div>
<div id="page">
<a href="javascript:void(0)" name="first">首页</a>
<a href="javascript:void(0)" name="up">上一页</a>
<a href="javascript:void(0)" name="next">下一页</a>
<a href="javascript:void(0)" name="last">尾页</a>
</div>
<div>
<input type="text" id="p" value="1"><!-- 当前页 -->
<input type="text" id="pageLast" value=""><!-- 总页数 -->
</div>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<!-- 偷懒+方便用了线上的jquery文件 -->
<script type="text/javascript">
$(function(){//页面加载显示当前页的内容
var p = $("#p").val();//获取当前页
ajax(p); //调用ajax方法
})
$('#page>a').click(function(){//页码的点击事件
var name = $(this);
//获取pagenow当前页和总页数pagelast,记得使用parseInt,转换整型
var pn = parseInt($("#p").val());
var pl = parseInt($("#pageLast").val());
switch(name.attr('name')){ //根据a标签内的name属性判断跳转方向
case "first": p = 1;break;
case "up": p = pn-1;break;
case "next": p = pn+1;break;
case "last": p = pl;break;
}
if (p<1 || p>pl) {
return;
}else{
ajax(p);
}
})
function ajax(p){//ajax方法,与后台交互
$.ajax({
type:"post",
datatype:"json",
url:"tb.php",
data:{p:p},
success:function(msg){
$('#data').empty();
aa = $.parseJSON(msg); //转换json格式(在返回值有小的问题的时候可以使用)
pageNow = parseInt(aa[0].page);
pn = $("#p").val(pageNow);//赋值当前页
pageLast = parseInt(aa[0].lastpage);
pl = $("#pageLast").val(pageLast);//赋值总页数
$.each(aa,function(k,v){//标签内追加内容
$('#data').append('<li>id为:'+v.tb_id+';名称为:'+v.name+'</li>')
})
}
})
}
</script>
后台PHP代码:
<?php
$pdo = new PDO("mysql:host=127.0.0.1;dbname=school",'root','root');
$sql = "select * from tb";
$count = $pdo->query($sql)->rowCount();//当前数据总条数
$p = isset($_POST['p'])?$_POST['p']:1;//页码
$dataPerpage = 5;//每页显示条数
$offset = ($p-1)*$dataPerpage;//偏移量
$last = ceil($count/$dataPerpage);//总页数
$sql2 = "select * from tb limit $offset,$dataPerpage";
$data = $pdo->query($sql2)->fetchAll(PDO::FETCH_ASSOC);
//把当前页和总页数发送给前台
$data[0]['page'] = $p;
$data[0]['lastpage'] = $last;
echo json_encode($data);