实战:分页-2019年7月29日 - PHP

总页数: 1.求出总记录数量, 2.考虑到总记录数量除以每页显示的记录数量有时结果不为整数,这时需要向上取整

实例

<?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]);

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果当前页码即页面url上p?=''的参数值小于页码总数量,那么可以正常进入下一页

如果有其他情况(大概只有一种情况就是url参数值即当前页码等于或大于页码总数量),那么进入else逻辑,设置一直跳转最大页码

Correction status：qualified

Teacher's comments：一旦到了最后一页, 应该将下一页的按钮禁用掉, 前一页也是一样的