PHP和jQuery实现简单的分页-php教程-PHP中文网

PHP和jQuery实现简单的分页

小云云

发布： 2018-03-21 15:02:57

原创

1647人浏览过

本文主要和大家分享PHP和jQuery实现简单的分页，希望能帮助到大家。

html 页面：

<!DOCTYPE html>
<html>
<head>
	<title>jquery ajax分页</title>
</head>
<body>
	<p>
		<p>下面是获取的内容</p>
		<ul id="data">
			<!-- 这里是显示的内容 -->
		</ul>
	</p>
	<p 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>
	</p>
	<p>
		<input type="text" id="p" value="1"><!-- 当前页 -->
		<input type="text" id="pageLast" value=""><!-- 总页数 -->
	</p>
	
</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);

登录后复制