Blogger Information
Blog 63
fans 1
comment 0
visits 75921
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
分页原理和偏移量
桃儿的博客
Original
2232 people have browsed it

分页原理和偏移量

1. 基本术语
记录索引: 记录在表中的位置,从0开始(与主键无关)
偏移量: 每页显示的起始位置
显示数量: 每页默认的显示数量
2. SQL中的分页关键字
`LIMIT m OFFSET n`
`LIMIT m`: 每页显示的记录数量
`OFFSET n`: 从指定的索引n开始显示
3. 偏移量计算公式
offset = num * (page - 1)

案例:

分页.jpg

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最新影视剧介绍</title>
    <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;
        }
    </style>
</head>
<!-- isset($_GET['p'] ? $_GET['p'] : 1  -->
<body onload="getData(<?php echo $_GET['p']??1; ?>)">
<table>
    <caption>最新影视剧介绍</caption>
    <thead>
    <tr>
        <th>序号</th>
        <th>片名</th>
        <th>简介</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<!--分页条-->
<ul>
</ul>
<script>
    function getData(p) {
        // 创建 Ajax对象
        var request = new XMLHttpRequest();
        // 监听请求
        request.addEventListener('readystatechange',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);
                    // 动态显示数据
                    // location.search='?p=1';
                    li.addEventListener('click',function () {
                        // var search = location.search.slice(0,3) + this.innerText;
                        var search = '?p=' + this.innerText;
                        location.replace(search);    //替换当前请求
                    },false);
                    // 设置当前页面高亮  方法一:p是Number,需要转String才可以比较
                    // li.className = (li.innerText === p.toString()) ? 'active' : null;
                    //设置当前页面高亮 方法二:
                    li.className = (li.innerText === location.search.slice(-1).toString()) ? 'active' : null;
                    ul.appendChild(li);
                }

                // 2. 显示当前页内容
                var tbody = document.getElementsByTagName('tbody').item(0);
                data[1].forEach(function (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);
                });
            }
        },false);
        // 配置请求
        request.open('GET', 'get_movies.php?p='+p.toString(), true);
        // 发送请求
        request.send(null);
    }
</script>
</body>
</html>

运行实例 »

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


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post