实战:分页-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：一旦到了最后一页, 应该将下一页的按钮禁用掉, 前一页也是一样的

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例