原生js实现复杂数据分页基本功能

Bertha 。 2024-04-17 16:40 105阅读 0赞

#### 实现复杂数据分页基本功能 ####

###### 效果图 ######

![在这里插入图片描述][20190828205359274.gif]

> 思想：将数据分页的所有方法和属性封装到一个自定义对象中，通过对该自定义对象属性、方法的调用实现数据分页的基本功能。

> 详解：① `onePageEleNumber`表示一页显示几条数据。`nowPageNumber`表示当前在第几页。`totalPage`代表总共多少页

> ② `setOnePageEle`方法：当切换到新的一页时，显示该页对应的内容。可用`start = (nowPageNumber - 1) * onePageEleNumber`来控制开始,`num=start+onePageEleNumber`来控制结尾(start和num分别为截取json数组的起始与截取数据的个数)，取到json内容后，创建新元素，将内容赋值给新元素的innerHTML

> ③ `setTotalPage`方法：设置总页数（`totalPage = Math.ceil(data.length / onePageEleNumber);`）

> ④ `setEleBg`方法：设置当前页的背景颜色为紫色。思想：将当前页的值赋值给`nowPageNumber`。使得数据分页底部导航栏`innerHTML`与`nowPageNumber`相等的元素的背景色变为紫色即可，其余元素的背景颜色为空。

> ⑤ `setLiEleClick`方法：数据分页导航栏的元素点击事件。当点击某一个元素时，调用`setEleBg`方法，将该元素的背景颜色设为紫色，并将该元素对应的`innerHTML`赋值给`onePageEleNumber`。再调用`setOnePageEle`方法，显示当前页对应的数据内容。

> ⑥ `setLastBtnClick`方法（此处以该案例的长度为例解释）：下一页按钮的点击事件，当点击下一页时，切换到下一页的内容。此处可将情况分为三类：1) 下一页在前六页：在这种情况下，直接`nowPageNumber++`，且调用`setEleBg`方法。2）下一页不再前六页:当当前页在第六页时，点击下一页，仍`nowPageNumber++`，但`nowPageNumber`对应的元素在数据分页导航栏的中间。之后同理，当前页永远在导航栏的中间位置。在这种情况下：导航栏的第一个元素的`innerHTML`是不断变化的，故导航栏的每个元素的`innerHTML`都是不断变化的。第一个元素的`innerHTML`为`start = nowPageNumber-Math.floor(liList.length/2);`。在确定了第一个元素的`innerHTML`后，对导航栏进行遍历，若元素的`innerHTML==nowPageNumber`时，该元素的背景变紫（由于start的确定与底部栏元素的长个数减半有关，故当前页永远在中间的位置）3）当前页为倒数第三页：从该页开始，点击下一页，当前页不再在导航栏的中间的位置。在这种情况下：导航栏的第一个元素是固定的，故导航栏的每个元素的`innerHTML`都是固定不变的。第一个元素的`innerHTML`为`start = totalPage-liList.length+1;`在确定了第一个元素的`innerHTML`后，对导航栏进行遍历，若元素的`innerHTML==nowPageNumber`时，该元素的背景变紫。最后再调用`setOnePageEle`方法

> ⑦ `setBeforeBtnClick`方法：与⑥相同，可分为三类。  
> ⑧`goOnePage`方法：Go按钮的点击事件。输入页数数字，点击Go，跳转到相应的页显示的数据变为该页对应的数据集合。实现该功能的思想：确定导航栏的起始元素的`innerHTML`,再重新给每个元素的`innerHTML`重新赋值，,调用`setEleBg`方法，将输入的值赋值给`nowPageNumber`,设置当前页对应的元素的背景色变为紫色。最后调用`setOnePageEle`方法，将显示数据变为当前页对应的数据集合。

###### 完整代码 ######

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="data/json.js"></script>
    <style> * { list-style: none; margin: 0; padding: 0; } .all { width: 1000px; height: 530px; border: 1px solid black; margin: auto; position: relative; font-size: 17px } .top { width: 100%; height: 8%; display: flex; flex-direction: row; background: linear-gradient(100deg, #ffd7f5, #ffd8d8); align-items: center; } .top > div { flex: 1; text-align: center; } .liList { display: flex; flex-direction: row; } .liItem { display: inline-block; border: 1px solid silver; width: 25px; height: 25px; text-align: center; margin: 0 5px; /*vertical-align: middle;*/ } .last, .before { /*vertical-align: middle;*/ width: 70px; text-align: center; height: 25px; border: 1px solid silver; margin: 0 5px; line-height: 25px; } .nav { display: flex; flex-direction: row; position: absolute; bottom: 0; left: 0; margin: 10px; } .content { display: flex; flex-direction: column; height: 430px; } .content > div { flex: 1; display: flex; flex-direction: row; align-items: center; /*会让div的高变为auto,而非100%*/ border-bottom: 1px solid silver; } .content > div > div { flex: 1; text-align: center; } .content > div:hover, .bg { background: #fecdff; color: white; } .cacTotal { margin: 0 20px; height: 25px; line-height: 25px; } .userInput { height: 27px; line-height: 27px; margin: 0 20px 0 0; } .userInputPage { width: 30px; height: 25px; } .go { border: 1px solid silver; width: 60px; height: 25px; line-height: 25px; text-align: center; } </style>
    <body>
    <div class="all">
        <div class="top">
            <div>序号</div>
            <div>姓名</div>
            <div>年龄</div>
            <div>性别</div>
            <div>邮箱</div>
            <div>QQ</div>
            <div>地址</div>
        </div>
        <div class="content"></div>
        <div class="nav">
            <div class="before">上一页</div>
            <ul class="liList">
                <li class="liItem">1</li>
                <li class="liItem">2</li>
                <li class="liItem">3</li>
                <li class="liItem">4</li>
                <li class="liItem">5</li>
                <li class="liItem">6</li>
            </ul>
            <div class="last">下一页</div>
            <div class="cacTotal">总共：<span class="totalPage">0</span>页</div>
            <div class="userInput">跳到：
                <input class="userInputPage"/>
                页
            </div>
            <div class="go">Go</div>
        </div>
    </div>
    <script> var content = document.getElementsByClassName("content")[0]; var totalPage = document.getElementsByClassName("totalPage")[0]; var liList = document.getElementsByClassName("liItem"); var last = document.getElementsByClassName("last")[0]; var before = document.getElementsByClassName("before")[0]; var userInputPage = document.getElementsByClassName("userInputPage")[0]; var go = document.getElementsByClassName("go")[0]; var optionsObj = { //数据分页的对象 onePageEleNumber: 10, nowPageNumber: 1, setOnePageEle: function () { //更新每页内容 content.innerHTML = ""; var start = (this.nowPageNumber - 1) * this.onePageEleNumber; var num= (this.nowPageNumber - 1) * this.onePageEleNumber + this.onePageEleNumber; var result = data.slice(start, num); for (var index in result) { var divEle = document.createElement("div"); var idEle = document.createElement("div"); idEle.innerHTML = result[index].id; divEle.appendChild(idEle); var nameEle = document.createElement("div"); nameEle.innerHTML = result[index].name; divEle.appendChild(nameEle); var ageEle = document.createElement("div"); ageEle.innerHTML = result[index].age; divEle.appendChild(ageEle); var sexEle = document.createElement("div"); sexEle.innerHTML = result[index].sex; divEle.appendChild(sexEle); var emailEle = document.createElement("div"); emailEle.innerHTML = result[index].email; divEle.appendChild(emailEle); var QQEle = document.createElement("div"); QQEle.innerHTML = result[index].QQ; divEle.appendChild(QQEle); var addressEle = document.createElement("div"); var addressEle = document.createElement("div"); addressEle.innerHTML = result[index].address; divEle.appendChild(addressEle); content.appendChild(divEle) } }, totalPage: 0, setTotalPage: function () { this.totalPage = Math.ceil(data.length / this.onePageEleNumber); }, setEleBg: function (newNumber) { // console.log(newNumber) for(var index in liList){ if(liList[index].innerHTML==newNumber){ liList[index].className = "bg liItem"; }else{ liList[index].className = "liItem"; } } this.nowPageNumber = newNumber; }, setLiEleClick: function () { var that = this; for (var index in liList) { liList[index].onclick = function () { console.log(that.nowPageNumber); that.setEleBg(parseInt(this.innerHTML)); that.setOnePageEle(); } } }, setLastBtnClick: function () { var that = this; last.onclick = function () { if (that.nowPageNumber < liList.length) { var newNumber = ++that.nowPageNumber; that.setEleBg(newNumber); }else { if(that.nowPageNumber==that.totalPage){ that.nowPageNumber=that.totalPage; }else{ that.nowPageNumber++; } var start; if(that.nowPageNumber+Math.floor(liList.length/2)<=that.totalPage){ start = that.nowPageNumber-Math.floor(liList.length/2);//start一直为变值 }else{ start = that.totalPage-liList.length+1;//start为固定值 } for(var i=0;i<liList.length;i++){ liList[i].innerHTML = start; if(liList[i].innerHTML==that.nowPageNumber){ //需要变化背景色（因为6是liList的最后一个，而下一个要跳转的7是在liList的中间值） liList[i].className = "bg liItem"; }else{ liList[i].className = "liItem"; } start++; } } that.setOnePageEle(); } }, setBeforeBtnClick:function(){ var that = this; before.onclick = function () { if(that.nowPageNumber<=1){ that.nowPageNumber=1; }else{ --that.nowPageNumber; } if (that.nowPageNumber <= liList.length) { for(var i=0;i<liList.length;i++){ liList[i].innerHTML = i+1; } var newNumber = that.nowPageNumber; that.setEleBg(newNumber); }else { if(that.nowPageNumber>=that.totalPage-Math.floor(liList.length/2)+1){ var newNumber =that.nowPageNumber; that.setEleBg(newNumber); }else{ var start = that.nowPageNumber-Math.floor(liList.length/2); for(var i=0;i<liList.length;i++){ //由于每次都在中间，故不需要换背景色 liList[i].innerHTML = start; start++; } } } that.setOnePageEle(); } }, goOnePage:function () { var that = this; go.onclick=function () { var destPage = parseInt(userInputPage.value); var start; if(destPage>that.totalPage || destPage<1 ||destPage==that.nowPageNumber){ if(destPage>that.totalPage){ alert("没有更大页了哦！"); } else if(destPage<1 ){ alert("没有更小页了哦！") } else{ alert("当前就在本页哦！") } userInputPage.value=""; return; } if(destPage>Math.floor(liList.length/2)+1 && destPage<=that.totalPage-Math.floor(liList.length/2)){ start = destPage-Math.floor(liList.length/2); }else if(destPage>that.totalPage-Math.floor(liList.length/2)){ start = that.totalPage-liList.length+1; }else{ start = 1; } for(var i=0;i<liList.length;i++){ liList[i].innerHTML = start; start++; } that.nowPageNumber = destPage; that.setEleBg(that.nowPageNumber); that.setOnePageEle(); } } }; optionsObj.setOnePageEle(); optionsObj.setTotalPage(); optionsObj.setEleBg(optionsObj.nowPageNumber); optionsObj.setLiEleClick(); optionsObj.setLastBtnClick(); optionsObj.setBeforeBtnClick(); totalPage.innerHTML = optionsObj.totalPage; optionsObj.goOnePage(); </script>
    </body>
    </html>

###### json数据 ######

var data=[
        { 
            "id":1,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":2,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":3,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":4,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":5,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":6,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":7,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":8,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":9,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":10,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":11,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":11,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":12,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":13,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":14,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":15,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":16,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":17,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":18,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":19,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":20,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":21,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":22,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":23,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":24,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":25,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":26,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":27,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":28,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":29,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":30,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":31,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":32,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":33,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":34,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":35,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":36,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":37,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":38,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":39,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":40,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":41,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":42,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":43,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":44,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":45,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":46,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":47,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":48,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":49,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":50,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":51,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":52,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":53,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":54,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":55,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":56,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":57,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":58,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":59,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":60,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":61,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":62,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":63,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":64,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":65,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":66,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":67,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":68,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":69,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":70,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":71,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":72,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":73,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":74,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":75,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":76,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":77,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":78,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":79,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":80,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":81,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":82,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":83,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":84,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":85,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":86,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":87,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":88,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":89,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":90,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":91,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":92,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":93,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":94,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":95,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":96,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":97,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":98,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":99,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":100,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":101,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":102,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":103,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":104,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":105,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":106,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":107,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":108,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":109,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":110,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":111,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":112,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":113,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":114,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":115,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":116,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":117,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":118,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":119,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":120,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":121,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":122,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":123,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":124,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":125,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":126,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":127,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":128,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":129,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":130,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":131,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":132,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":133,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":134,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":135,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":136,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":137,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":138,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":139,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":140,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":141,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":142,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":143,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":144,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":145,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":146,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":147,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":148,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":149,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":150,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":151,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":152,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":153,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":154,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":155,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":156,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":157,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":158,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        },
        { 
            "id":159,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":160,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
        ,
        { 
            "id":161,
            "name":"张三",
            "age":18,
            "sex":"男",
            "email":"21321@qq.com",
            "QQ":"21321321",
            "address":"西安市"
        }
    ]

[20190828205359274.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3cd79a79da9c4dfe926f4335cec90427.gif