JavaScript（二十二）数据分页demo

最新推荐文章于 2022-05-13 11:43:36 发布

We_jia

最新推荐文章于 2022-05-13 11:43:36 发布

阅读量297

点赞数

分类专栏： JavaScript 文章标签：数据分页

本文链接：https://blog.csdn.net/We_jia/article/details/87890566

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

数据分页效果图

思路分析

在每页上显示定量的数据，通过给button绑定点击事件来实现翻页的效果，利用面向对象的开发方法，将所需的变量定义，根据需要去调用，建立计算总页数函数、当前页函数、创建页面数据函数、创建点击类函数、创建页数显示函数进行元素之间的相互调用，实现在页面上显示初始页的值和实现下方翻页按钮的功能，最终实现数据分页的效果。

HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            position: relative;
            margin: 0 auto;
            width: 1190px;
            height: 600px;
            border: 1px solid silver;
        }
        .title ul{
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(#b5faff,deepskyblue);
            position: relative;
        }
        .title li{
            list-style: none;
            float: left;
            width: 119px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        #content{
            width: 1190px;
            height: 500px;
            position: relative;
        }
        #userover {
            background-color: #fdeaff;
            color: #00aaff;
        }

        #userleave {
            background-color: transparent;
            color: black;
        }

        .user-data ul{
            background: transparent !important;
            border-bottom: 1px solid silver;
        }
        .user-data ul li{
            height: 30px !important;
            line-height: 30px !important;
            font-size: 13px;
        }
        .buttonNumber{
            overflow: hidden;
            padding: 15px 20px

        }
        .totle{
            display: block;
            float: left;
            width: 60px;
            height: 30px;
            border: 1px solid #f3f3f3;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
        }
        .topPage,.downPage{
            width: 70px;
            height: 30px;
            outline: none;
            border:1px solid #f3f3f3;
            float: left;
            margin: 0 5px;
            font-size: 13px;
            background-color: transparent;
        }
        .btnNumber{
            margin: 0;
            padding: 0;
            overflow: hidden;
            float: left;
        }
        .btnNumber>li{
            list-style: none;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            margin: 0 2px;
            border: 1px solid #f3f3f3;
            font-size: 13px;
            cursor: pointer;
        }
        .gopage span{
            display: block;
            float: left;
            font-size: 13px;
            line-height: 30px;
            width: 40px;
            height: 30px;
            border: 1px solid #f3f3f3;
            text-align: center;
        }
        .txtnum{
            float: left;
            width: 30px;
            height: 28px;
            outline: none;
            border: 1px solid #f3f3f3;
            text-align: center;
        }
        .gopage button{
            width: 70px;
            height: 30px;
            outline: none;
            border:1px solid #f3f3f3;
            float: left;
            margin: 0 10px;
            font-size: 13px;
            background-color: transparent;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="title">
        <ul>
            <li>序号</li>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
            <li>地址</li>
            <li>电话</li>
            <li>QQ</li>
            <li>Email</li>
            <li>毕业（是/否）</li>
            <li>结婚（是/否）</li>
        </ul>
    </div>
    <div id="content">

    </div>
    <div class="buttonNumber">
        <span class="totle">共<span>0</span>页</span>
        <button class="topPage">上一页</button>
        <ul class="btnNumber">
          

        </ul>
        <button class="downPage">下一页</button>
        <div class="gopage">
            <span>到第</span>
            <input class="txtnum" value="1" type="text"/>
            <span>页</span>
            <button id="btngo">确定</button>
        </div>
    </div>
</div>
<script src="js/data.js"></script>
<script src="js/pageData.js"></script>
</body>
</html>

JavaScript代码

/**
 * Created by Administrator on 2019/1/12.
 */
(function () {  //自执行函数

    //pageNum=10(一页的数据)  pageTotal（总页数） Data  总数据  pageNow(当前页)  DataCount 总数据量  PageDataArray 当前页的数据
    var paging = {
        pageNum: 10,             //一页的数据
        pageTotal: 0,           //总页数
        pageNow: 1,            //当前页
        PageDataArray: [],     //当前页的数据   十行
        DataCount: allData.length,       //总数据量
        Data: allData,             //全部的数据
        ElementDiv: [],     //定义一个空数组   存储十行数据   避免反复获取10行元素

        TotalPage: function () {    //总页数
            this.pageTotle = Math.ceil(this.DataCount / this.pageNum);
        },
        pageNowData: function (page) {    //当前页的数据
            var index=(page-1)*10;
            this.PageDataArray = this.Data.slice(index,index+this.pageNum);   //在全部的数据中  选取十个   index+10 选取长度
            /*动态绑定数据*/
            this.DataToElement();
        },


        CreatElement: function () {   //动态创建元素
            for (var i = 0; i < this.pageNum; i++) {    /*动态创建 十行数据*/
                var Data_parEle = document.createElement("div");   //每遍历一次创建一行div元素  创建十行
                Data_parEle.className = "title user-data";                  //div的类名称   俩个类名称中间用空格 隔开
                var ul_par = document.createElement("ul");      //每遍历一次创建一行ul元素  创建十行
                for (var k = 0; k < 10; k++) {
                    var li_child = document.createElement("li");
                    li_child.innerHTML = "1";
                    ul_par.appendChild(li_child);    //li 追加给ul
                }
                Data_parEle.appendChild(ul_par);    //ul 追加给div
                document.getElementById("content").appendChild(Data_parEle);    //追加给content
                this.ElementDiv.push(Data_parEle);
                Data_parEle.addEventListener("mouseover", function () {
                    this.setAttribute("id", "userover");
                });
                Data_parEle.addEventListener("mouseleave", function () {
                    this.setAttribute("id", "userleave");
                });
            }
        },


        DataToElement: function () {   //动态绑定
            for (var i = 0; i < this.ElementDiv.length; i++) {             //避免反复获取10元素
                var lichild = this.ElementDiv[i].children[0].children;    //找li   div的子集ul 的子集li
              if(this.PageDataArray[i]==undefined){
                  this.ElementDiv[i].style.display ="none";    //行  div
              }
                else{
                  this.ElementDiv[i].style.display ="block";
                  var index = 0;
                  for (var key in this.PageDataArray[i]) {
                      lichild[index].innerHTML = this.PageDataArray[i][key] == true ? "是" : this.PageDataArray[i][key] == false ? "否" : this.PageDataArray[i][key];
                      index++; //0-9
                  }
              }
            }
        },

        //用户点击事件   赋值
        NumBerInfo: function () {
            document.getElementsByClassName("totle")[0].children[0].innerHTML = this.pageTotle;
            /*获取到总页数*/
            var ulNumber = document.getElementsByClassName("btnNumber")[0];
            /* 获取页码的ul元素*/
            ulNumber.innerHTML = this.pageNumberli(this.pageNow, this.pageTotle);
            /*调用函数  赋值语句*/

            var oldelement = ulNumber.children [0];       // 设置第一页的默认颜色
            oldelement.style.backgroundColor = "#1D9DEE";
            oldelement.style.color = "white";

            /* 使用委托  给li元素添加点击事件*/
            var that = this;
            ulNumber.onclick = function () {
                var liele = event.target;
                /*Event 对象提供一个属性target  返回事件的目标节点  称为事件源*/
                if (liele.nodeName.toLocaleLowerCase() == "li") {
                    if (liele.getAttribute("data-nobtn")) {   /*如果点的是省略号 就终止*/
                        return;
                    }

                    oldelement.style.backgroundColor = "transparent";     //上一个变透明
                    oldelement.style.color = "black";

                    liele.style.backgroundColor = "#1D9DEE";
                    liele.style.color = "white";

                    oldelement = liele;         //存值

                    that.pageNow = liele.innerHTML;
                    that.pageNowData(liele.innerHTML);
                }

            }

            //点击下一页
            var downbtn = document.getElementsByClassName("downPage")[0];
            downbtn.onclick = function () {
                if(that.pageNow>=that.pageTotle){    //到20页停止
                    return;
                }
                that.pageNow++;
                ulNumber.innerHTML = that.pageNumberli(that.pageNow, that.pageTotle);    //重新生成li
                oldelement = document.getElementById("libg");
                that.pageNowData(that.pageNow);
            }

            //上一页

            var topbtn = document.getElementsByClassName("topPage")[0];
            topbtn.onclick = function () {
                if (that.pageNow <= 1) {
                    return;
                }
                that.pageNow--;
                ulNumber.innerHTML = that.pageNumberli(that.pageNow, that.pageTotle);
                oldelement = document.getElementById("libg");
                that.pageNowData(that.pageNow);
            }

         /* 点确定按钮*/
            var btngo=document. getElementById ("btngo");
            var txtnum=document.getElementsByClassName ("txtnum")[0];
            btngo.onclick= function (){
               that.pageNowData(txtnum.value);   /*文本框的值   调用当前页的数据*/
                ulNumber.innerHTML = that.pageNumberli(parseInt(txtnum.value), that.pageTotle);   //传的是字符串 否则无法实现后缩
               that.pageNow= parseInt (txtnum.value) ;
            }


        },


        /*产生多少li元素*/
        //1,2,3,4,5...20
        //1...6,7,8,9,10...20
        //1...16,17,18,19,20
        pageNumberli: function (cur_page, total_page) {
            var res = "";
            for (var i = 1; i <= total_page; i++) {
                if (i == 2 && i < cur_page - 5) {             /*省略前面*/    //页数比5大就要缩
                    i = cur_page - 5;
                    res += "<li data-nobtn='true'>...</li>";
                }                                                          //1,2,3,4,5...20
                else if (i == cur_page + 5 && cur_page + 5 < total_page) {      /* 省略后面*/
                    i = total_page - 1;
                    res += "<li data-nobtn='true'>...</li>";
                }
                else {
                    if (i == cur_page) {
                        res += "<li id='libg' style='background-color: #1D9DEE; color: white;'>" + i + "</li>";//当前页有颜色
                    }
                    else {
                        res += "<li>" + i + "</li>";  //其他页 透明
                    }
                }
            }
            return res;
        }
    };


    /*计算总共的页数*/
    paging.TotalPage();
    /*匿名函数的调用对象.函数名();*/

    /*创建十行数据*/
    paging.CreatElement();

    /*计算当前页的数据量*/
    paging.pageNowData(1);


    /* 用户点击事件  赋值*/
    paging.NumBerInfo();


})();


//点击事件结束以后，绑定每页的数据， 传参  函数的先后顺序，