数据分页（day21）

最新推荐文章于 2022-09-25 00:46:47 发布

ice_bear-

最新推荐文章于 2022-09-25 00:46:47 发布

阅读量226

点赞数 1

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/100088301

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

效果图
在这里插入图片描述
零零碎碎：

1.align-items：y轴垂直居中
2.动态时钟：旋转角度0度从水平位置开始
3.不同属性之间用逗号隔开，属性与内容之间用冒号！

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）渲染当前页面，动态追加元素
在这里插入图片描述

输出结果为：

动态添加元素至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为：在这里插入图片描述
用savechangdeli记录之前变色，默认第一个变色，且在记录时为了避免影响当前this值，引入that
在鼠标点击事件之前的this和that都是对象类型，点击事件中this为当前对象li，that仍然为对象，所以修改classname通过对象修改

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

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

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

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和大于它的情况

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）跳转按钮
重新设置显示的五个数，首先要获取要跳转的值！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>