Collection
Collection
理解分页的原理, 并背诵偏移量的公式
页显示数量 * (当前页 -1 )
例如:
当前页显示内容为5
5*(当前分页-1) offset索引是从0开始
第一页的话 5*(1-1)=0 从0开始查询
第二页的话 5*(2-1)=5 从5开始查询
当前页码的高亮显示方法, 用location.search来实现,或者用其它方式都可以
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<?php
?>
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>分页显示</title>
</head>
<style>
table,tr,td{
border: 1px solid lightgray;
border-collapse: collapse;
}
table{width: 800px;text-align: center}
thead{
background: lightcoral;
}
thead tr{height: 40px}
tbody tr{height: 30px}
ul{list-style: none}
ul li{display: inline-block;border: 1px solid black; width: 20px;height: 20px;line-height: 20px;margin: 2px;text-align: center;cursor: pointer;}
ul li:hover {
background-color: grey;
color: white;
}
.active {
background-color: lightcoral;
}
</style>
<body onload="callBack(<?php echo isset($_GET['p']) ? $_GET['p'] : 1; ?>)">
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>简介</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul>
</ul>
<script>
let request = new XMLHttpRequest();
function callBack(p) {
request.addEventListener('readystatechange',getData,false);
request.open('GET','get_movies.php?p='+p.toString(),true);
request.send(null);
}
function getData() {
if (request.readyState === 4 && request.status === 200){
let data = JSON.parse(request.responseText);
// console.log(data);
// 第一步添加分页条
for (let i = 0; i < data[0]; i++) {
let ul = document.getElementsByTagName('ul').item(0);
let li = document.createElement('li');
li.innerHTML = i + 1;
// 判断当前按钮的值和地址栏get参数最后一个值是否相等
// if (li.innerText === location.search.slice(3,4)){
// li.className = 'active';
// }
// 三目运算
li.className = li.innerText === location.search.slice(3,4) ? 'active' : null;
// 动态显示分页数据
li.onclick = function () {
// location.search 获取地址栏的地址后面的参数 get参数
// slice(0,3) 获取指定内容 参数1 是起始索引 参数2 是结束索引
// let search = location.search.slice(0,3) + this.innerText;
// location.replace(); //替换当前请求 'http://'会直接跳转地址 不带http:// 会在当前地址后面添加
location.replace('?p='+this.innerText);
};
ul.appendChild(li);
}
// 判断地址栏是否有get参数 没有的话就添加一个参数
if (location.search === ''){
location.replace('?p=1');
}
// 2. 显示当前页内容
let tbody = document.getElementsByTagName('tbody').item(0);
data[1].forEach(function (value){
let tr = document.createElement('tr');
for (let key in value) {
let td = document.createElement('td');
td.innerText = value[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例