完成分页中的前一页和下一页的功能显示--2019/07/29 - 作业

完成分页中的前一页和下一页的功能显示, 提示：注意页码越界的判断;
备注：按照老师上课代码改的，感觉改得过于简单，不知道会不会有什么问题，功能是可以实现
实例
<!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 id>
<!--    这里显示影视信息列表-->
    </tbody>
</table>


<ul>

</ul>



</body>
</html>


<script>


    // 获取表格显示区
    var tbody = document.getElementsByTagName('tbody').item(0);

    // 获取页码显示区
    var ul = document.getElementsByTagName('ul').item(0);

    var pages='';

    // 当前页码: 默认显示第一页
    var p = <?=$_GET['p'] ?? 1?>;
    // 创建 Ajax对象
    var request = new XMLHttpRequest();

    // 监听文档的load事件,在页面加载完成后通过Ajax方式获取数据
    window.addEventListener('load', showData(), false);

    // load事件方法
    function showData() {
        // 监听Ajax成功回调
        request.addEventListener('readystatechange', getData, false);
        // 配置请求
        request.open('GET', 'get_movies.php?p='+p, true);
        // 发送请求
        request.send(null);
    }

    function getData() {
        if (request.readyState === 4) {
            // console.log(request.responseText);

            // 1. 获取Ajax返回的数据并解析为JavaScript变量
            var obj = JSON.parse(request.responseText);

             pages = obj['pages'];
            var movies = obj['movies'];

            // 2. 生成表格数据
            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;

            // 性能优化建议: 使用文档片段统一添加,以减少DOM操作,提升渲染效率
            /*
            var frag = document.createDocumentFragment();
            movies.forEach(function (movie) {
                var tr = document.createElement('tr');
                for (var key in movie) {
                    var td = document.createElement('td');
                    td.innerHTML = movie[key];
                    tr.appendChild(td);
                }
                frag.appendChild(tr);
            });
            tbody.appendChild(frag);
            */

             ul.innerHTML+="<li id='prev'>«</li>";

            // 3. 生成页码
            for (var i = 1; i <= pages; i++) {
                // 设置当前页码是否高亮?
                var active = (i === p) ? 'active' : '';
                ul.innerHTML += '<li class="'+ active  +'">' + i + '</li>';

                // 供参考的,规范的DOM语法
                /*
                var li = document.createElement('li');
                li.appendChild(document.createTextNode(i.toString()));
                if (p === i)  li.classList.add('active');
                ul.appendChild(li);
                 */
            }

            ul.innerHTML+="<li id='next'>»</li>";

        }
    }


    // 给页码添加点击事件
    ul.addEventListener('click', set_page, false);

    function set_page(ev) {
       if(ev.target.id==='prev'&&p>1){
           p=p-1;
       }
       if(ev.target.id==='next'&&p<pages){
            p=p+1;
       }
       if(ev.target.id===""){
           p=ev.target.innerText;
       }
        location.search = '?p=' +p;

    }

    // 作业:
    // 添加上一下, 下一页功能, 注意判断页码越界的问题, 例如到了第一页再前翻怎么处理, 到了最后一页再后翻如何处理?
</script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
备注：对于上一页和下一页功能，先提交这个简单的方法，后期在研究更优化的方法和提交完整的分页项目
Correction status：qualified

Teacher's comments：随着学习深入 , 你会发现还有许多地方需要完善的