<legend id="a5jtk"></legend>

  • <video id="a5jtk"><pre id="a5jtk"><p id="a5jtk"></p></pre></video>
      <meter id="a5jtk"><listing id="a5jtk"><address id="a5jtk"></address></listing></meter>
    1. <small id="a5jtk"><form id="a5jtk"><em id="a5jtk"></em></form></small>

          1. <small id="a5jtk"><table id="a5jtk"><td id="a5jtk"></td></table></small>

            前端代码

            实例

            <!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
            全部评价
            本港台聊天室-本港台六开彩开奖结果-本港台六开奖结果