久久久天堂国产精品女人,国产成人av在线影院

首頁 > 博客列表 > 用location.search實(shí)現(xiàn)頁碼的高亮顯示（用parseInt將獲取到location.search.slice(3,4)來進(jìn)行判斷改變li的類樣式）2019年 6月11日20點(diǎn)

博主信息

博文 49

粉絲 1

評論 0

訪問量 52667

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<?php
//獲取當(dāng)前顯示的頁數(shù)
//intval()將獲取的字符串轉(zhuǎn)為數(shù)值
$page = intval($_GET['p']);

//連接數(shù)據(jù)庫
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');

//每頁顯示五條數(shù)據(jù)
$num  = 5;

//ceil(1.2);    //向上取整函數(shù)，最終獲得2

//獲取總頁數(shù)
$sql = "SELECT CEIL(COUNT(*)/{$num}) FROM `movies`";
$stmt = $pdo->prepare($sql);
$stmt->execute();
$pages = $stmt->fetchColumn(0);    //fetchColumn（0）獲取第一列數(shù)據(jù)

// 每頁的顯示起止位置: 偏移量
// 偏移量 = 當(dāng)前顯示數(shù)量 * (當(dāng)前頁碼 - 1)
$offset = $num * ($page - 1);

//LEFT()：截取()；CONCAT（）：字符串拼接
$sql = "SELECT `mov_id`,`name`, CONCAT(LEFT(`detail`, 20),'......') FROM `movies` LIMIT {$num} OFFSET {$offset}";
$stmt = $pdo->prepare($sql);
$stmt->execute();

$result = $stmt->fetchAll(PDO::FETCH_ASSOC);   //二維數(shù)組

//將查詢結(jié)果集轉(zhuǎn)換成json字符串返回到前端
echo json_encode([$pages , $result]);

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

前端網(wǎng)頁代碼：

實(shí)例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>最新影視劇介紹</title>
    <style>
        /*設(shè)置表格樣式*/
        table
        {
            /*折疊表格線與單元格之間的間隙*/
            border-collapse:collapse;
            width: 90%;
        }

        /*設(shè)置表格與單元格邊框*/
        table,th, td
        {
            border: 1px solid black;
        }
        /*設(shè)置標(biāo)題行背景色*/
        table thead tr:first-of-type {
            background-color: lightblue;
        }
        /*設(shè)置每一列的寬度*/
        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%;
        }

        /*設(shè)置分頁條樣式*/
        ul {
            text-align: center;
        }
        ul li {
            /*去掉默認(rèn)樣式*/
            list-style-type: none;
            /*轉(zhuǎn)為水平顯示*/
            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;
        }

        /*作業(yè): 如何設(shè)置當(dāng)前頁碼的高亮?*/
        .active {
            background-color: lightblue;
            border: 1px solid red;
        }
    </style>
</head>
<?php //echo isset($_GET['P']) ? $_GET['p'] : 1?>
<!--簡寫-->
<body onload="getData(<?=$_GET['p']?? 1; ?>)">
<table>
    <caption>最新影視劇介紹</caption>
    <thead>
    <tr>
        <td>序號(hào)</td>
        <td>片名</td>
        <td>簡介</td>
    </tr>
    </thead>

    <tbody>
    </tbody>
</table>

<!--分頁符-->
<ul>
</ul>

<script>
    function getData(p) {
        //控制臺(tái)中打印參數(shù)
        console.log(p);

        //創(chuàng)建ajax對象
        var request = new XMLHttpRequest();
        //監(jiān)聽請求
        request.onreadystatechange = function () {
            //請求成功
            if (request.readyState === 4) {
                //將服務(wù)器返回的json字符串轉(zhuǎn)換為js對象
                var data = JSON.parse(request.responseText);
                // console.log(data);

                //動(dòng)態(tài)顯示分頁條
                var ul = document.getElementsByTagName('ul').item(0);
                for (var i = 0, n = data[0];i < n; i += 1) {
                    var li = document.createElement('li');
                    li.innerText = (i+1);
                    // console.log(li.innerTEXT);

                    //↓↓地址輸入php.io/6.11/show.php ，分頁按鈕失效，點(diǎn)擊1后轉(zhuǎn)跳php.io/6.11/1↓↓
                    //li就是當(dāng)前頁碼
                    li.onclick = function () {
                        var search = location.search.slice(0,3) + this.innerText;
                      //替換當(dāng)前請求
                        location.replace(search);
                    };
                    ul.appendChild(li);
                }


                //頁碼高亮顯示
                // console.log(location.search);
                //parseInt將獲取到的字符串轉(zhuǎn)變?yōu)閿?shù)字類型
                var page = parseInt(location.search.slice(3,4));
                //獲取已經(jīng)生成的兩個(gè)li
                var li1 = document.getElementsByTagName('li').item(0);
                var li2 = document.getElementsByTagName('li').item(1);
                //用If語句判斷當(dāng)前頁碼，以此來改變頁碼高亮顯示
                if (page === 1) {
                    li1.className = 'active';
                    li2.className = null;
                }else if (page === 2) {
                    li2.className = 'active';
                    li1.className = null;
                }



                //將數(shù)據(jù)表內(nèi)容，渲染到表格中
                var tbody = document.getElementsByTagName('tbody').item(0);
                // console.log(data[1]);

                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='+p.toString(),true);

        //發(fā)送請求
        request.send(null);
    }
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

選中第一頁的顯示效果：

第一頁頁碼高亮顯示.png

選中第二頁的顯示效果：

第二頁頁碼高亮顯示.png

批改狀態(tài)：未批改

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

520小實(shí)驗(yàn)

2019-05-20 22:44:59

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例

實(shí)例