<legend id="ra9il"><dl id="ra9il"></dl></legend>

  • <legend id="ra9il"><dl id="ra9il"></dl></legend>
  • <legend id="ra9il"><dl id="ra9il"></dl></legend>

    <optgroup id="ra9il"></optgroup>

    <span id="ra9il"><output id="ra9il"></output></span>
    <ol id="ra9il"></ol>
    <ol id="ra9il"></ol>

  • 前端代码

    实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>电影分类</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <table>
        <caption>最新影视剧介绍</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>片名</th>
            <th>简介</th>
        </tr>
        </thead>
    <!--        tr*5>td{x}*3-->
        <tbody>
        </tbody>
    </table>
    <style>
        /*设置表格样式*/
    
        table
        {
            /*折叠表格线与单元格之间的间隙*/
            border-collapse:collapse;
            width: 90%;
        }
    
        /*设置表格与单元格边框*/
        table,th, td
        {
            border: 1px solid black;
        }
        /*设置标题行背景色*/
        table thead tr:first-of-type {
            background-color: lightblue;
        }
        /*设置每一列的宽度*/
        table tbody tr td:nth-of-type(1) {
            width: 10%;
        }
        table tbody tr td:nth-of-type(2){
            width: 20%;
        }
        table tbody tr td:nth-of-type(3) {
            width: 70%;
        }
    
        /*设置分页条样式*/
        ul {
            text-align: center;
        }
        ul li {
            /*去掉默认样式*/
            list-style-type: none;
            /*转为水平显示*/
            display: inline-block;
            width: 30px;
            height: 20px;
            border: 1px solid black;
            /*垂直水平居中*/
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            margin-left: 5px;
        }
        ul li:hover {
            background-color: lightblue;
            border: 1px solid red;
        }
    
        /*作业: 如何设置当前页码的高亮?*/
        .active {
            background-color: lightblue;
            border: 1px solid red;
        }
        .pages{
            width: 600px;
            margin: 0 auto;
        }
        .pages a{
            margin: 5px 5px;
            border: 1px solid #ccc;
            width:40px;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            text-align: center;
        }
    </style>
    
    <!--分页条-->
    <div class="pages">
    
    </div>
    
    <!--<ul>-->
    <!---->
    <!--</ul>-->
    
    <script>
    //
    //    // 创建 Ajax对象
    //    var request = new XMLHttpRequest();
    //    // 监听请求
    //    request.onreadystatechange = function () {
    //        // 请求成功
    //        if (request.readyState === 4) {
    //            var data  = JSON.parse(request.responseText);
    //            console.log(data);
    //
    //            // 1. 动态显示分页条
    //            var ul = document.getElementsByTagName('ul').item(0);
    //            for (var i = 0; i < data[0]; i++) {
    //                var li = document.createElement('li');
    //                li.innerText = (i+1);
    //
    //                // 改变url的参数
    //               li.onclick = function () {
    //                   var search = location.search.slice(0,3) + this.innerText;
    //                   location.replace(search);    //替换当前请求
    //               };
    //
    //                // 将表格内容渲染到页面中...
    //                ul.appendChild(li);
    //            }
    //
    //            // 2. 显示当前页内容
    //            var tbody = document.getElementsByTagName('tbody').item(0);
    //            data[1].forEach(function (value){
    //                console.log(value)
    //                var tr = document.createElement('tr');
    //                for (var key in value) {
    //                    var td = document.createElement('td');
    //                    td.innerText = value[key];
    //                    tr.appendChild(td);
    //                }
    //                tbody.appendChild(tr);
    //            });
    //
    //        }
    //    };
    //
    //    // 配置请求
    //    request.open('GET', 'get_movies.php?p=<?//=$_GET["p"] ?:1?>//', true);
    //    // 发送请求
    //    request.send(null);
    // 创建 Ajax对象
       var request = new XMLHttpRequest();
       request.onreadystatechange = function () {
           // 请求成功
           if (request.readyState === 4) {
               var data  = JSON.parse(request.responseText);
               console.log(data[0]);
               // 1. 动态显示分页条
                var page=document.getElementsByClassName('pages')[0];
                for (var i = 0; i < data[0]; i++){
                    var a = document.createElement('a');
    
                    a.innerText = (i+1);
    //                // 改变url的参数
    //               a.onclick = function () {
    //
    //                   var search = location.search.slice(0,3) + this.innerText;
    //                   location.replace("show.php?="+search);    //替换当前请求
    //                   // console.log(search);
    //               };
    
                   // 将表格内容渲染到页面中...
    
                   page.appendChild(a);
                    var search = a.innerText;
                    // console.log(a)
    
                        // a.setAttribute("href","show.php?p="+(i+1));
                        // var url=this.responseURL;
                        // console.log(url);
    
    
                    a.setAttribute("href","show.php?p="+(i+1));
                }
               GetRequest();
               console.log(strs[1])
               $("a").eq(strs[1]-1).css("background","red");
               var span1=document.createElement('a');
               var span2=document.createElement('a');
               span1.innerText = ('首页');
               span1.setAttribute("href","show.php?p=1");
               span2.innerText = ('尾页');
               span2.setAttribute("href","show.php?p="+data[0]);
    
               console.log(span1);
    
               $(".pages").eq(0).prepend(span1);
               $(".pages").eq(0).append(span2);
               // 2. 显示当前页内容
                var tbody = document.getElementsByTagName('tbody').item(0);
                data[1].forEach(function (value){
                    // console.log(value)
                    var tr = document.createElement('tr');
                    for (var key in value) {
                        var td = document.createElement('td');
                        td.innerText = value[key];
                        tr.appendChild(td);
                    }
                    tbody.appendChild(tr);
                });
    
            }
        };
    
        // 配置请求
        request.open('GET', 'get_movies.php?p=<?=$_GET["p"] ?:1?>', true);
        // 发送请求
        request.send(null);
    
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {    //判断是否有参数
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
                strs = str.split("=");   //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
    // alert(strs[1]);          //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
    
            }
            // if (strs[1]=1){
            //     var myCollection=document.getElementsByTagName('a');
            //     console.log(myCollection);
            // }
    
        }
    
    
    
    </script>
    </body>
    </html>

    运行实例 ?

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

    php代码

    实例

    <?php
    // 获取当前要显示的页数
    
    $page = intval($_GET['p']);
    
    $pdo = new PDO('mysql:dbname=php', 'root', 'root');
    
    // 每页显示数量
    $num = 5;
    
    // 总页数: 需要分二步, 第一求出总记录数量, 第二总记录数量除以每页显示的记录数量,再向上取整
    $sql = "SELECT CEIL(COUNT(`car_id`)/{$num}) FROM `movies`";
    $stmt = $pdo->prepare($sql);
    $stmt->execute();
    $pages = $stmt->fetchColumn(0);
    
    
    // 每页的显示起止位置: 偏移量
    // 偏移量 = 当前显示数量 * (当前页码 - 1)
    $offset = $num * ($page - 1);
    
    $sql = "SELECT `car_id`,`name`, CONCAT(LEFT(`detail`,20),'...') FROM `movies` LIMIT {$num} OFFSET {$offset} ";
    $stmt = $pdo->prepare($sql);
    
    $stmt->execute();
    
    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    echo json_encode([$pages, $result]);

    运行实例 ?

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

    总结

    分页技术

    1: 用到ajax技术,从请求到响应。

    2:老师课程写的有缺陷,可能备课不认真,直接show.php,点击页码,页面丢失。

    改良之后了,就可以了。用a标签做,href加地址。动态获取页码。添加到里面。

    3:因为页码不多,后期还可以加上一页,下一页,和。。。的效果。

    0/300
    全部评价
    今开奖结果-今期开奖结果现场-今期开奖结果直