数据分页（day21）

向右看齐 2024-04-17 06:28 72阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
**零零碎碎：**

> 1.align-items：y轴垂直居中  
> 2.动态时钟：旋转角度0度从水平位置开始  
> 3.不同属性之间用逗号隔开，属性与内容之间用冒号！  
> ![在这里插入图片描述][20190827002110788.png]  
> 4.vertical-align:相对父元素上下对齐  
> 5.函数的两种表示方法  
> `function 函数名（）{}` 或者在对象中可以使用 `函数名:function(){}`  
> 6.给对象添加属性可以直接添加也可以通过`.属性名`添加

#### **7.代码实现** ####

**1）获取所有数据**

getAllData: function () { 
                //获取后端数据
                return this.allData = data;
            }

**2）计算总页码:总数据长度/每页显示的数据数量**

caltotalPage: function () { 
          this.totalPage = Math.ceil(this.allData.length / this.pageNumber);
            }

**3）获取当前页的数据**（有参数接收默认当前页）  
计算当前页显示的数据数量时：截取数组`slice`不改变原数组，`两个参数为索引值取小不取大`  
计算方法为：第一页截取0-10，第二页截取10-20  
所以计算方法为：（当前页-1）*10——当前页*每页能显示的数据数量

getnowPageData: function (now) { 
                this.nowPage = now;
                this.nowPageData = this.allData.slice((this.nowPage - 1) * this.pageNumber, this.nowPage * this.pageNumber);
            }

4）渲染当前页面，动态追加元素  
![在这里插入图片描述][20190827002612640.png]  
![在这里插入图片描述][2019082700263547.png]  
输出结果为：  
![在这里插入图片描述][20190827002641796.png]  
动态添加元素至this.ele中  
添加之后设置样式

renderData: function () { 
                //处理之前页的数据
                this.ele.innerHTML = "";
                for (var index in this.nowPageData) { 
                    var divele = document.createElement("div");
                    this.ele.appendChild(divele);
                    var divele1 = document.createElement("div");
                    divele1.innerHTML = this.nowPageData[index].id;
                    var divele2 = document.createElement("div");
                    divele2.innerHTML = this.nowPageData[index].name;
                    var divele3 = document.createElement("div");
                    divele3.innerHTML = this.nowPageData[index].age;
                    var divele4 = document.createElement("div");
                    divele4.innerHTML = this.nowPageData[index].sex;
                    var divele5 = document.createElement("div");
                    divele5.innerHTML = this.nowPageData[index].email;
                    var divele6 = document.createElement("div");
                    divele6.innerHTML = this.nowPageData[index].QQ;
                    var divele7 = document.createElement("div");
                    divele7.innerHTML = this.nowPageData[index].address;
    
                    divele.appendChild(divele1);
                    divele.appendChild(divele2);
                    divele.appendChild(divele3);
                    divele.appendChild(divele4);
                    divele.appendChild(divele5);
                    divele.appendChild(divele6);
                    divele.appendChild(divele7);
                }
    
            }

**5）添加页码事件**：选中变色，上下页  
获取到的liList为：![在这里插入图片描述][2019082700271242.png]  
用`savechangdeli`记录之前变色，默认第一个变色，且在记录时为了避免影响当前this值，引入that  
在鼠标点击事件之前的this和that都是对象类型，点击事件中this为当前对象li，that仍然为对象，所以修改classname通过对象修改

that.savechangeLi.className = "";
    this.className = "colorbg";

![在这里插入图片描述][20190827002743351.png]  
但是切换页面要渲染数据之前需要先清空当前现实的数据信息，避免累加

添加完成后要修改对象中的属性值以便之后函数调用

that.nowPage = parseInt(this.innerHTML);

liEvent: function () { 
               var that = this;
               for (var i = 0; i < this.liList.length; i++) { 
                   this.liList[i].onclick = function () { 
                       that.saveChangedli.className = "";
                       this.className = "bgcolor";
                       that.saveChangedli = this;
                       //获取当前点击页的数据
                       that.getnowPageData(this.innerHTML);
                       that.renderData();
                       that.nowPage = parseInt(this.innerHTML);
                   }
               }
           }

**6）获取总页数要在计算完总页数函数之后**

totle.innerHTML = fenPage.totalPage;
            /*要在计算函数之后才能获取到*/

**7）添加上下页按钮事件（模仿百度）!难点**

> 同样是要记录上一个数据，+1后改变类名称；

> 要将翻页后的页码显示在最中间，给每页加上liList长度/2向上取整，要转换为整型才能实现正常加运算，否则为字符串拼接；

> 为了实现下一页显示在中间，增加变量控制第一次显示在中间，之后都在其基础上加1；

> 第无数次写错true! True true true  
> 最后一页要控制；

> 同理添加上一页功能，处理当前页<liList.length和大于它的情况

8）跳转按钮  
重新设置显示的五个数，首先要获取要跳转的值！value属性！

var gonum = document.getElementsByClassName("gonum")[0].value;

跳转时如果又到了第五页，要实现正常–，要在跳转之前先给`showMid`变量改为`true`;

> 判断跳转到距离最后一页一定位置时不再跳转到中间

> 最后几页跳转后的调整修改（自动生成起始页）

var count=that.totalPage-parseInt(gonum);//计算当前数字后面还有几个
      count=that.liList.length-count-1;//计算当前数字前面还有几个
      num0=gonum-count;//计算起始数字

that.goTo.onclick = function () { 
                    that.showMid = true;
                    var gonum = document.getElementsByClassName("gonum")[0].value;
                    that.nowPage = gonum;
                    var num0 = gonum - Math.floor(that.liList.length / 2);
    
                    /*重新设置显示的五个数*/
                    that.saveChangedli.className = "";
                    if(gonum< Math.ceil(that.liList.length / 2)){ 
                        that.addcolor();
                    }
                    else{ 
                        if (parseInt(gonum) + Math.floor(that.liList.length / 2) > that.totalPage) { 
                            var count=that.totalPage-parseInt(gonum);
                            count=that.liList.length-count-1;
                            num0=gonum-count;
                            for (var i = 0; i < that.liList.length; i++) { 
                                that.liList[i].innerHTML = num0 + i;
                            }
                            that.addcolor();
                        }
                        else { 
                            for (var i = 0; i < that.liList.length; i++) { 
                                that.liList[i].innerHTML = num0 + i;
                            }
                        }
                        that.addcolor();
                    }
    
                    //获取当前点击页的数据
                    that.getnowPageData(that.nowPage);
                    that.renderData();
                }

完整代码

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="tea/js/data.js"></script>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
    
            ul, li { 
                list-style: none;
            }
    
            .data-allItems { 
                margin: auto;
                width: 700px;
                height: 500px;
                border: 1px solid #d1eaef;
                position: relative;
            }
    
            .data-title { 
                height: 40px;
            }
    
            .data-title ul { 
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                background: linear-gradient(#45a0ff, #3a9aee);
            }
    
            .data-title ul li { 
                line-height: 40px;
                color: #000;
            }
    
            .data-nav { 
                position: absolute;
                left: 0;
                bottom: 0;
                vertical-align: middle;
                padding: 5px;
            }
    
            .data-nav ul { 
                display: inline-block;
                vertical-align: middle;
            }
    
            .data-nav button { 
                border: 1px solid silver;
                outline: none;
                background: transparent;
                font-size: 13px;
                width: 70px;
                height: 25px;
                vertical-align: middle;
    
            }
    
            .data-nav ul li { 
                display: inline-block;
                border: 1px solid silver;
                width: 25px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                box-sizing: border-box;
            }
    
            .data-nav span.spanPage { 
                margin-left: 10px;
                font-size: 14px;
            }
    
            .data-nav ul.nav { 
                cursor: pointer;
            }
    
            .spanGo span { 
                margin-left: 10px;
                font-size: 14px;
            }
    
            .spanGo input { 
                width: 30px;
                outline: none;
                margin-right: 5px;
                text-align: center;
            }
    
            .spanGo button { 
                margin-left: 5px;
                margin-right: 5px;
            }
    
            .data-info { 
                height: 420px;
                display: flex;
                flex-direction: column;
            }
    
            .data-info > div { 
                display: flex;
                height: 38px;
                line-height: 38px;
                flex: 1;
                flex-direction: row;
                border-bottom: 1px solid silver;
            }
    
            .data-info > div:hover { 
                background: #323c6e;
                color: #0efff8;
            }
    
            .data-info > div > div { 
                text-align: center;
                flex: 1;
            }
    
            .bgcolor { 
                background: #3f96ef;
                color: #fff;
            }
        </style>
    </head>
    <body>
    <div class="data-allItems">
        <div class="data-title">
            <ul>
                <li>序号</li>
                <li>姓名</li>
                <li>年龄</li>
                <li>性别</li>
                <li>邮箱</li>
                <li>QQ</li>
                <li>地址</li>
            </ul>
        </div>
        <div class="data-info">
    
        </div>
        <div class="data-nav">
            <button class="btnUpPage">上一页</button>
            <ul class="nav">
                <li class="bgcolor">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <button class="btnDownPage">下一页</button>
            <span class="spanPage">  总共：<span class="totle">5</span>页</span>
            <span class="spanGo">
                <span>跳到:</span> <input type="text" class="gonum" value="1"/>页
                <button class="goTo">Go</button>
            </span>
        </div>
    </div>
    <script>
        /*创建对象：当前页，每页显示数量，总页数，总数据,当前页数据及各种函数*/
        var fenPage = { 
            nowPage: 1,
            pageNumber: 10,
            totalPage: 0,
            allData: null,
            nowPageData: [],
            saveChangedli: null, /*记录之前变色*/
            showMid: false,
            /*1. 获取所有数据*/
            getallData: function () { 
                return this.allData = data;
            },
            /*2. 计算总页码:总数据长度/每页显示的数据数量*/
            caltotalPage: function () { 
                this.totalPage = Math.ceil(this.allData.length / this.pageNumber);
            },
            /*3. 获取当前页的数据：截取数组slice不改变原数组，两个参数为索引值取小不取大，计算！*/
            getnowPageData: function (now) { 
                this.nowPage = now;
                this.nowPageData = this.allData.slice((this.nowPage - 1) * this.pageNumber, this.nowPage * this.pageNumber);
            },
            /*4. 遍历数组，渲染页面*/
            renderData: function () { 
                //处理之前页的数据
                this.ele.innerHTML = "";
                for (var index in this.nowPageData) { 
                    var divele = document.createElement("div");
                    this.ele.appendChild(divele);
                    var divele1 = document.createElement("div");
                    divele1.innerHTML = this.nowPageData[index].id;
                    var divele2 = document.createElement("div");
                    divele2.innerHTML = this.nowPageData[index].name;
                    var divele3 = document.createElement("div");
                    divele3.innerHTML = this.nowPageData[index].age;
                    var divele4 = document.createElement("div");
                    divele4.innerHTML = this.nowPageData[index].sex;
                    var divele5 = document.createElement("div");
                    divele5.innerHTML = this.nowPageData[index].email;
                    var divele6 = document.createElement("div");
                    divele6.innerHTML = this.nowPageData[index].QQ;
                    var divele7 = document.createElement("div");
                    divele7.innerHTML = this.nowPageData[index].address;
    
                    divele.appendChild(divele1);
                    divele.appendChild(divele2);
                    divele.appendChild(divele3);
                    divele.appendChild(divele4);
                    divele.appendChild(divele5);
                    divele.appendChild(divele6);
                    divele.appendChild(divele7);
                }
    
            },
            /*5. 添加页码事件：选中变色，上下页，跳转*/
            liEvent: function () { 
                var that = this;
                for (var i = 0; i < this.liList.length; i++) { 
                    this.liList[i].onclick = function () { 
                        that.saveChangedli.className = "";
                        this.className = "bgcolor";
                        that.saveChangedli = this;
                        //获取当前点击页的数据
                        that.getnowPageData(this.innerHTML);
                        that.renderData();
                        that.nowPage = parseInt(this.innerHTML);
                    }
                }
            },
            /*6. 获取总页数*/
            /*7. 上下页按钮*/
            btnEvent: function () { 
                var that = this;
                //下一页
                this.btndown.onclick = function () { 
                    that.nowPage++;
                    if (that.nowPage > that.totalPage) { 
                        that.nowPage = that.totalPage;
                    }
                    that.saveChangedli.className = "";
                    if (that.liList[that.liList.length - 1].innerHTML >= that.totalPage) { 
                        that.addcolor();
                    }
                   else{ 
                        /*长度小于liList的长度正常++*/
                        if (that.nowPage <= that.liList.length) { 
                            that.addcolor();
                        }
                        else { 
                            /*长度超过liList的长度后处理翻页*/
                            if (that.showMid == false) { 
                                for (var i = 0; i < that.liList.length; i++) { 
                                    that.liList[i].innerHTML = parseInt(that.liList[i].innerHTML) + Math.ceil(that.liList.length / 2);
                                }
                            }
                            else { 
                                for (var i = 0; i < that.liList.length; i++) { 
                                    that.liList[i].innerHTML = parseInt(that.liList[i].innerHTML) + 1;
                                }
                            }
                            that.showMid = true;
                            that.liList[Math.floor(that.liList.length / 2)].className = "bgcolor";
                            that.saveChangedli = that.liList[Math.floor(that.liList.length / 2)];
                        }
                    }
                    //获取当前点击页的数据
                    that.getnowPageData(that.nowPage);
                    that.renderData();
                }
                /*上一页*/
                this.btnup.onclick = function () { 
                    if (that.nowPage == 1) { 
                        return;
                    }
                    that.nowPage--;
                    that.saveChangedli.className = "";
    
                    if (that.nowPage >= that.liList[Math.floor(that.liList.length / 2)].innerHTML && that.liList[that.liList.length - 1].innerHTML >= that.totalPage) { 
                        that.addcolor();
                    }
                    else{ 
                        if (that.nowPage <= that.liList.length) { 
                            /*长度小于liList的长度*/
                            if (that.showMid) { /*到第五页之后*/
    // console.log(1);
                                for (var i = 0; i < that.liList.length; i++) { 
                                    that.liList[i].innerHTML = i + 1;
                                }
                            }
                            that.addcolor();
                            that.showMid = false;
                        }
                        else { 
    // console.log(3);
                            for (var i = 0; i < that.liList.length; i++) { 
                                that.liList[i].innerHTML = parseInt(that.liList[i].innerHTML) - 1;
                            }
                            that.liList[Math.floor(that.liList.length / 2)].className = "bgcolor";
                            that.saveChangedli = that.liList[Math.floor(that.liList.length / 2)];
                        }
                    }
                    //获取当前点击页的数据
                    that.getnowPageData(that.nowPage);
                    that.renderData();
                }
                /*8.跳转按钮*/
                that.goTo.onclick = function () { 
                    that.showMid = true;
                    var gonum = document.getElementsByClassName("gonum")[0].value;
                    that.nowPage = gonum;
                    var num0 = gonum - Math.floor(that.liList.length / 2);
    
                    /*重新设置显示的五个数*/
                    that.saveChangedli.className = "";
                    if(gonum< Math.ceil(that.liList.length / 2)){ 
                        that.addcolor();
                    }
                    else{ 
                        if (parseInt(gonum) + Math.floor(that.liList.length / 2) > that.totalPage) { 
                            var count=that.totalPage-parseInt(gonum);
                            count=that.liList.length-count-1;
                            num0=gonum-count;
                            for (var i = 0; i < that.liList.length; i++) { 
                                that.liList[i].innerHTML = num0 + i;
                            }
                            that.addcolor();
                        }
                        else { 
                            for (var i = 0; i < that.liList.length; i++) { 
                                that.liList[i].innerHTML = num0 + i;
                            }
                        }
                        that.addcolor();
                    }
    
                    //获取当前点击页的数据
                    that.getnowPageData(that.nowPage);
                    that.renderData();
                }
            },
            addcolor: function () { 
                var that = this;
                for (var k = 0; k < that.liList.length; k++) { 
                    if (parseInt(that.liList[k].innerHTML) == that.nowPage) { 
                        that.liList[k].className = "bgcolor";
                        that.saveChangedli = that.liList[k];
                    }
                }
            }
        }
    
        window.onload = function () { 
            /*将所有属性添加至对象中*/
            var dataInfo = document.getElementsByClassName("data-info")[0];
            var nav = document.getElementsByClassName("nav")[0];
            var totle = document.getElementsByClassName("totle")[0];//总页码
            var btnUpPage = document.getElementsByClassName("btnUpPage")[0];//上一页
            var btnDownPage = document.getElementsByClassName("btnDownPage")[0];//下一页
            var goTo = document.getElementsByClassName("goTo")[0];//下一页
    
            fenPage.ele = dataInfo;
            fenPage.liList = nav.children;
            fenPage.btnup = btnUpPage;
            fenPage.btndown = btnDownPage;
            fenPage.goTo = goTo;
            /*默认第一个变色*/
            fenPage.saveChangedli = fenPage.liList[0];
    
            fenPage.getallData();
            fenPage.caltotalPage();
            fenPage.getnowPageData(1);
            fenPage.renderData();
            fenPage.liEvent();
            fenPage.btnEvent();
            fenPage.addcolor();
            totle.innerHTML = fenPage.totalPage;
            /*要在计算函数之后才能获取到*/
        }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9b63ae254d2b451989b7596c6d5c7b47.png
[20190827002110788.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a9678a4f0a884a2aa7f55416c4b80e50.png
[20190827002612640.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e957adbeb9ef41f0a5cff146a5e389d5.png
[2019082700263547.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6cecfd7f892042a9aac6db49e9fb5d78.png
[20190827002641796.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0c04ee77cff247b7bf8ae4683e1a1562.png
[2019082700271242.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/567ece748cbc4fed9f9204dad2b61e4a.png
[20190827002743351.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ea5dd4e9a8ed4179bc6d32922d48d15c.png