AJAX分页显示 - 作业

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</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;

        }
    </style>
</head>
<body>
<table>
    <caption>最新影视剧介绍</caption>
    <thead>
    <tr>
        <th>序号</th>
        <th>片名</th>
        <th>简介</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div>
    <ul>
        <li><<</li>
        <li>>></li>
    </ul>
</div>
</body>
</html>

<script>
    // 获取内容区
    var tbody = document.getElementsByTagName('tbody').item(0);
    // 获取页码区
    var ul = document.getElementsByTagName('ul').item(0);
    // // 设置当前页码
    // var p = <?php echo $_GET['p'] ?? 1 ?>;
    var p = <?=$_GET['p'] ?? 1?>;
    // var p = 2;
    // 创建请求
    var request = new XMLHttpRequest();
    // 获取后台返回数据
    window.addEventListener('load',showData,false);
    function showData(){
        // 监听回调
        request.addEventListener('readystatechange',getData,false);
        // 配置请求
        request.open('GET','get.php?p='+p,true);
        // 发送请求
        request.send(null);
    }


    function getData(){
        if (request.readyState === 4){
            // 数据返回成功,解析json数据
            var obj = JSON.parse(request.responseText);
            var pages = obj['pages'];
            var books = obj['books'];
            // 遍历服务器传回内容
            var str = '';
            books.forEach(function (book) {
                str += '<tr>' + '<td>' + book['book_id'] + '</td>' + '<td>' + book.book_name + '</td>' + '<td>' + book.book_author + '</td>' + '<td>' + book.book_desc + '</td>' + '</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){
                // 获取上一页与下一页按钮
                var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                // console.log(ev.target);
                if(ev.target === prev){
                    (p-1)>0 ? location.search = '?p=' + (p-1) : location.search = '?p=1';
                }else if(ev.target === next){
                    (p+1)<pages ? location.search = '?p=' + (p+1)  : location.search = '?p=' + pages;
                }else{
                    location.search = '?p=' + ev.target.innerText;
                }
            }

        }
    }

</script>

运行实例 »

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

实例

<?php
// 获取当前要显示的页数
$page = intval($_GET['p'] ? $_GET['p'] : 1);
// 连接数据库
$pdo = new PDO('mysql:host=127.0.0.1;dbname=books', 'root', 'root');
// 每页显示数量
$num = 5;
// 获取总数
$sql = "SELECT CEIL(COUNT('book_id')/{$num}) FROM `books`";
// 执行sql语句并返回pdo预处理对象
$stmt = $pdo->prepare($sql);
// 执行
$stmt->execute();
// 获取第一列的值
$pages = $stmt->fetchColumn(0);
// 偏移量
$offset = $num * ($page - 1);
// 返回当页要显示的内容
$sql = "SELECT `book_id`,`book_name`,`book_author`,`book_desc` FROM `books` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$books = $stmt->fetchAll(PDO::FETCH_ASSOC);


// 将数据以json格式返回前端
echo json_encode(['pages' => $pages, 'books' => $books]);

运行实例 »

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

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

实例

实例