ホームページ > 記事 > バックエンド開発 > PHP と jQuery は単純なページングを実装します

PHP と jQuery は単純なページングを実装します

小云云オリジナル: 2018-03-21 15:02:571395ブラウズ

この記事では主に、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方法
	})


	$(&#39;#page>a&#39;).click(function(){//页码的点击事件
		var name = $(this);
		//获取pagenow当前页和总页数pagelast，记得使用parseInt，转换整型
		var pn = parseInt($("#p").val());
		var pl = parseInt($("#pageLast").val());
		switch(name.attr(&#39;name&#39;)){ //根据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){
				$(&#39;#data&#39;).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){//标签内追加内容
					$(&#39;#data&#39;).append(&#39;<li>id为：&#39;+v.tb_id+&#39;;名称为：&#39;+v.name+&#39;</li>&#39;)
				})
				
			}
		})
	}
</script>

バックエンド PHP コード:

<?php
$pdo = new PDO("mysql:host=127.0.0.1;dbname=school",&#39;root&#39;,&#39;root&#39;);
$sql = "select * from tb";
$count = $pdo->query($sql)->rowCount();//当前数据总条数
$p = isset($_POST[&#39;p&#39;])?$_POST[&#39;p&#39;]: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][&#39;page&#39;] = $p;
$data[0][&#39;lastpage&#39;] = $last;
echo json_encode($data);

PHP と jQuery は単純なページングを実装します

関連記事