前端代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影分类</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<!-- tr*5>td{x}*3-->
<tbody>
</tbody>
</table>
<style>
/*设置表格样式*/
table
{
/*折叠表格线与单元格之间的间隙*/
border-collapse:collapse;
width: 90%;
}
/*设置表格与单元格边框*/
table,th, td
{
border: 1px solid black;
}
/*设置标题行背景色*/
table thead tr:first-of-type {
background-color: lightblue;
}
/*设置每一列的宽度*/
table tbody tr td:nth-of-type(1) {
width: 10%;
}
table tbody tr td:nth-of-type(2){
width: 20%;
}
table tbody tr td:nth-of-type(3) {
width: 70%;
}
/*设置分页条样式*/
ul {
text-align: center;
}
ul li {
/*去掉默认样式*/
list-style-type: none;
/*转为水平显示*/
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
/*垂直水平居中*/
text-align: center;
line-height: 20px;
cursor: pointer;
margin-left: 5px;
}
ul li:hover {
background-color: lightblue;
border: 1px solid red;
}
/*作业: 如何设置当前页码的高亮?*/
.active {
background-color: lightblue;
border: 1px solid red;
}
.pages{
width: 600px;
margin: 0 auto;
}
.pages a{
margin: 5px 5px;
border: 1px solid #ccc;
width:40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
}
</style>
<!--分页条-->
<div class="pages">
</div>
<!--<ul>-->
<!---->
<!--</ul>-->
<script>
//
// // 创建 Ajax对象
// var request = new XMLHttpRequest();
// // 监听请求
// request.onreadystatechange = function () {
// // 请求成功
// if (request.readyState === 4) {
// var data = JSON.parse(request.responseText);
// console.log(data);
//
// // 1. 动态显示分页条
// var ul = document.getElementsByTagName('ul').item(0);
// for (var i = 0; i < data[0]; i++) {
// var li = document.createElement('li');
// li.innerText = (i+1);
//
// // 改变url的参数
// li.onclick = function () {
// var search = location.search.slice(0,3) + this.innerText;
// location.replace(search); //替换当前请求
// };
//
// // 将表格内容渲染到页面中...
// ul.appendChild(li);
// }
//
// // 2. 显示当前页内容
// var tbody = document.getElementsByTagName('tbody').item(0);
// data[1].forEach(function (value){
// console.log(value)
// var tr = document.createElement('tr');
// for (var key in value) {
// var td = document.createElement('td');
// td.innerText = value[key];
// tr.appendChild(td);
// }
// tbody.appendChild(tr);
// });
//
// }
// };
//
// // 配置请求
// request.open('GET', 'get_movies.php?p=<?//=$_GET["p"] ?:1?>//', true);
// // 发送请求
// request.send(null);
// 创建 Ajax对象
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
// 请求成功
if (request.readyState === 4) {
var data = JSON.parse(request.responseText);
console.log(data[0]);
// 1. 动态显示分页条
var page=document.getElementsByClassName('pages')[0];
for (var i = 0; i < data[0]; i++){
var a = document.createElement('a');
a.innerText = (i+1);
// // 改变url的参数
// a.onclick = function () {
//
// var search = location.search.slice(0,3) + this.innerText;
// location.replace("show.php?="+search); //替换当前请求
// // console.log(search);
// };
// 将表格内容渲染到页面中...
page.appendChild(a);
var search = a.innerText;
// console.log(a)
// a.setAttribute("href","show.php?p="+(i+1));
// var url=this.responseURL;
// console.log(url);
a.setAttribute("href","show.php?p="+(i+1));
}
GetRequest();
console.log(strs[1])
$("a").eq(strs[1]-1).css("background","red");
var span1=document.createElement('a');
var span2=document.createElement('a');
span1.innerText = ('首页');
span1.setAttribute("href","show.php?p=1");
span2.innerText = ('尾页');
span2.setAttribute("href","show.php?p="+data[0]);
console.log(span1);
$(".pages").eq(0).prepend(span1);
$(".pages").eq(0).append(span2);
// 2. 显示当前页内容
var tbody = document.getElementsByTagName('tbody').item(0);
data[1].forEach(function (value){
// console.log(value)
var tr = document.createElement('tr');
for (var key in value) {
var td = document.createElement('td');
td.innerText = value[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
}
};
// 配置请求
request.open('GET', 'get_movies.php?p=<?=$_GET["p"] ?:1?>', true);
// 发送请求
request.send(null);
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("="); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
// alert(strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
}
// if (strs[1]=1){
// var myCollection=document.getElementsByTagName('a');
// console.log(myCollection);
// }
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
php代码
实例
<?php
// 获取当前要显示的页数
$page = intval($_GET['p']);
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
// 每页显示数量
$num = 5;
// 总页数: 需要分二步, 第一求出总记录数量, 第二总记录数量除以每页显示的记录数量,再向上取整
$sql = "SELECT CEIL(COUNT(`car_id`)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$pages = $stmt->fetchColumn(0);
// 每页的显示起止位置: 偏移量
// 偏移量 = 当前显示数量 * (当前页码 - 1)
$offset = $num * ($page - 1);
$sql = "SELECT `car_id`,`name`, CONCAT(LEFT(`detail`,20),'...') FROM `movies` LIMIT {$num} OFFSET {$offset} ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode([$pages, $result]);运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
分页技术
1: 用到ajax技术，从请求到响应。
2:老师课程写的有缺陷，可能备课不认真，直接show.php,点击页码，页面丢失。
改良之后了，就可以了。用a标签做，href加地址。动态获取页码。添加到里面。
3:因为页码不多，后期还可以加上一页，下一页，和。。。的效果。