一.分页
分页主要通过使用sql语句limit来实现
总页数: 1.求出总记录数量, 2.考虑到总记录数量除以每页显示的记录数量有时结果不为整数,这时需要向上取整
每页显示开始位置: 偏移量
偏移量 = 当前显示数量 * (当前页码 - 1)
get_movies.php
实例
<?php
$page = intval($_GET['p'] ?? 1);
$pdo = new PDO('mysql:dbname=php', 'root', 'root');
$num = 5;
$sql = "SELECT CEIL(COUNT(`mov_id`)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$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]);运行实例 »
点击 "运行实例" 按钮查看在线实例
show.php
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
}
thead > tr{
background-color: lightblue;
}
ul, li {
padding: 0;
margin: 5px auto;
list-style: none;
text-align: center;
overflow: hidden;
}
li {
display: inline-block;
width: 30px;
height: 20px;
border: 1px solid black;
margin-left: 3px;
}
li:hover {
background-color: lightblue;
cursor: pointer;
}
.active {
background-color: lightblue;
}
.skip {
position: absolute;
top: 140px;
display: inline-block;
width: 40px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: lightgray;
color: white;
opacity: 0.2;
font-size: 36px;
}
.prev{
left: 0;
}
.next{
right: 0;
}
.skip:hover {
cursor: pointer;
opacity: 0.5;
color: black;
}
</style>
</head>
<body>
<table>
<caption>最新影视剧介绍</caption>
<thead>
<tr>
<th>序号</th>
<th>片名</th>
<th>简介</th>
</tr>
</thead>
<tbody id>
</tbody>
</table>
<span class="skip prev"><</span>
<ul class="countul"></ul>
<span class="skip next">></span>
<script>
var tbody = document.getElementsByTagName('tbody').item(0);
var ul = document.getElementsByTagName('ul').item(0);
var p=<?php echo isset($_GET['p']) ? $_GET['p'] : 1 ?>;
var request = new XMLHttpRequest();
window.addEventListener('load', showData, false);
function showData() {
request.addEventListener('readystatechange', getData, false);
request.open('GET', 'get_movies.php?p=' + p, true);
request.send(null);
}
function getData() {
if (request.readyState === 4) {
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;
for (var i = 1; i <= pages; i++) {
// 设置当前页码是否高亮?
var active = (i === p) ? 'active' : '';
ul.innerHTML += '<li class="' + active + '">' + i + '</li>';
}
}
}
ul.addEventListener('click', set_page, false);
function set_page(ev) {
console.log(ev.target.innerText);
location.search = '?p=' + ev.target.innerText;
}
var skip=document.getElementsByClassName("skip");
skip.item(0).addEventListener('click',skiptoleft,false);
skip.item(1).addEventListener('click',skiptoright,false);
function skiptoleft(ev){
var yema=<?php echo $_GET['p']?>;
if(yema > 1 ){
console.log(<?php echo $_GET['p'] ?>-1);
var yml=<?php echo $_GET['p'] ?>-1;
location.search='?p='+yml;
}
else{
location.search='?p=1';
}
}
function skiptoright(ev){
var count=document.getElementsByClassName('countul').item(0).getElementsByTagName('li').length;
var yema=<?php echo $_GET['p']?>;
if(yema<count){
console.log(<?php echo $_GET['p'] ?>+1);
var ymr=<?php echo $_GET['p'] ?>+1;
location.search='?p='+ymr;
}
else{
location.search='?p='+count;
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
这里添加两个span标签实现上一页,下一页功能
上一页:
获取url中的p=''参数值进行逻辑判断
异常情况应该只有参数为1时或者小于1时进行的跳转
这里逻辑为如果当前url上p的值大于1则正常进行跳转处理
其他情况均为设置跳转页面为p=1
下一页:
获取<ul>下面子元素<li>即获取页码的总数量来进行越界判断
如果当前页码即页面url上p?=''的参数值小于页码总数量,那么可以正常进入下一页
如果有其他情况(大概只有一种情况就是url参数值即当前页码等于或大于页码总数量),那么进入else逻辑,设置一直跳转最大页码