本案例演示效果 pc.wenbus.cn/0729/show.php
GET返回数据代码实例
<?php
//获取栏目ID
$page = intval($_GET['p'] ?? 1);
//另外一种写法 $page = intval($_GET['p'] ? $_GET['p'] : 1 );
//连接数据库
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
//每页显示的数量
$num = 5 ;
//总页数
$stmt = $pdo->prepare(" SELECT CEIL(COUNT(`mov_id`)/{$num}) FROM `movies`");
$stmt ->execute();
$pages = $stmt ->fetchColumn(0);
//设置偏移量
$offset = $num * ($page - 1);
//设置查询数据
$sql = "SELECT `mov_id`,`name`,CONCAT(LEFT(`detail`,20),'...') AS `detail` FROM `movies` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$movies = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['pages'=>$pages,'movies'=>$movies]);运行实例 »
点击 "运行实例" 按钮查看在线实例
用JS和AJAX完成的分页实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影视剧列表</title>
<style>
table{
border-collapse: collapse;
width:100%
}
th,td{
border: 1px solid red;
width: 100px;
text-align: center;
}
thead > tr {
background-color: lightslategrey;
}
ul,li{
list-style: none;
padding: 0;
margin: 5px auto;
text-align: center;
overflow: hidden;
}
ul li{
display: inline-block;
border: 1px solid;
width: 30px;
height: 20px;
margin-left: 5px;
}
ul li:hover{
background-color: lightcoral;
cursor: pointer;
}
.active{
background-color: lightcoral;
}
</style>
</head>
<body>
<table>
<caption>影视剧列表</caption>
<thead>
<tr>
<th>序号</th>
<th>影片名</th>
<th>影片简介</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul>
</ul>
<script>
//获取表格区
var tbody = document.getElementsByTagName('tbody').item(0);
//获取分页区
var ul = document.getElementsByTagName('ul').item(0);
//获取当前页码
var p = <?=$_GET['p'] ? $_GET['p'] : 1 ?>;
//创建Ajax对象
var request = new XMLHttpRequest();
//窗口加载监听事件
window.addEventListener('load',showData,false);
function showData() {
//监听成功回调
request.addEventListener('readystatechange',getData,false);
//设置请求参数
request.open('GET','get_data.php?p='+p,true);
//发送请求
request.send(null);
}
//成功回调的函数
function getData() {
if (request.readyState===4){
//获取JSON解码返回的数据
var obj = JSON.parse(request.responseText);
//获取总页数
var pages = obj['pages'];
//获取内容数据
var movies = obj ['movies'];
//生成表格数据
var str = '';
movies.forEach(function (movie) {
str += '<tr>';
str += '<td>'+ movie['mov_id']+'</td>';
str += '<td>'+ movie.name+'</td>';
str += '<td>'+ movie.detail+'</td>';
str += '</tr>';
});
tbody.innerHTML = str;
}
//生成分页条
var list = '';
for (var i =1;i <= pages;i++){
var active = (i === p) ? 'active' : '';
list += '<li class="'+ active +'" >' + i + '</li>';
}
//生成前一页 分页 后一页 分页条
ul.innerHTML = '<li class="prev"><<</li>'+ list + '<li class="next">>></li>';
}
//生成分页条点击事件
ul.addEventListener('click', set_page, false);
function set_page(ev) {
var obj = JSON.parse(request.responseText);
var pages = obj['pages'];
//如果点击到整一行ul会显示bug 排除掉
if (ev.target.children.length>0){
return false;
}
//根据li的class属性值来定义分页条功能
switch (ev.target.classList.value) {
//当class属性值时prev则进行前一页
case 'prev':
if (p !==1){
location.search = '?p=' + (p - 1);
}else{
alert('当前是第一页');
}
break;
case'next':
if (p == pages){
alert('当前是最后一页');
}else{
location.search = '?p=' + (p + 1);
}
break;
default:
location.search = '?p=' + ev.target.innerText;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例