锐客网

  1. 首页 > it技术 > >

js对象实现数据分页效果

本文实例为大家分享了js对象实现数据分页效果的具体代码，供大家参考，具体内容如下
实现数据分页要清楚这个的方面的设计：
1.先模拟建立一个后台数据库，如下：

var peoson=[{"id":"1"," name":"鞠婧祎","sex":"女","age":"25","class":"八班","habby":"跳舞","score":"40","addess":"陕西西安长安区"},{"id":"2"," name":"关晓彤","sex":"女","age":"20","class":"八班","habby":"跳舞","score":"40","addess":"陕西西安长安区"},{"id":"3"," name":"赵丽颖","sex":"女","age":"26","class":"八班","habby":"跳舞","score":"40","addess":"陕西西安长安区"},{"id":"4"," name":"薛之谦","sex":"男","age":"37","class":"八班","habby":"跳舞","score":"40","addess":"陕西西安长安区"}]

2.设置每页的数据量，当前页数以及总页数
用函数动态设置总页数，根据总的数据量除以每页数据量来计算；
用函数动态设置每页里的数据是由总数据中的哪几条；
Allpage: function () {this.allpage = Math.ceil(this.Message.length / this.perpage); console.log(this.Message.length); console.log(this.allpage); },Nowpagenum:function(n){var first=(n-1)*this.perpage; //0var last=n*this.perpage ; //10this.nowpagenum =this.Message.slice(first,last); },

3.动态创建dom元素，给最大块添加子元素，用来存放每一条数据
Creatnews:function() {this.list.innerHTML = ""; for (var i = 0; i < this.perpage; i++) {var page_list = document.createElement("div"); page_list.className = "pagelist"; for (var key in this.nowpagenum[i]) {var per_child = document.createElement("div"); per_child.className = "perchild"; page_list.appendChild(per_child); per_child.innerHTML = this.nowpagenum[i][key]; //console.log(this.nowpagenum[i]); }this.list.appendChild(page_list); }},

4.创建列表下面的页数，进行前缩进，后缩进和前后缩进
假设总页数为
如果当前页数大于5页会进行前缩进，前面的页数从2到当前页数减一的页数缩进；
如果当前页数小于16时都会进行后缩进
介于两者之间的页数会进行前后缩进。
Page_ma:function(current,totle){var str=""; for(var i=1; i <=totle; i++){if(i==2 && current-3>i ){ //?????current>5i=current-1; str+="
  • ...
    • "; }else if(i==current+4 && current+4"+i+""; }else{str+="
  • "+i+"
    • "; }}}this .pageshu.innerHTML= str; },

    5.点击页数时，会跳转到当前页数的数据，并进行相应的缩进
    Pageclick:function(){var mini_list=document.getElementsByClassName ("minilist"); for(var k=0; k
    6.点击上下页，以及设置跳转的页数时，会跳转到当前页数的数据，并进行相应的缩进
    Clickevent:function(){Fenye. back.onclick =function(){Fenye.nowpage--; if(Fenye.nowpage<2){Fenye.nowpage=1; }Fenye.Page_ma(Fenye.nowpage,Fenye.allpage); Fenye.Pageclick(); Fenye.Creatnews (); Fenye.Nowpagenum (Fenye.nowpage); }; Fenye.go.onclick =function(){if(Fenye.nowpage>=Fenye.allpage){Fenye.nowpage=Fenye.allpage; }Fenye.nowpage++; Fenye.Page_ma(Fenye.nowpage,Fenye.allpage); Fenye.Pageclick(); Fenye.Creatnews (); Fenye.Nowpagenum (Fenye.nowpage); }; Fenye.tiao.onclick =function(){var put=document.getElementById ("in_put"); Fenye.nowpage = parseInt (put.value ) ; if(put.value>=Fenye.allpage){Fenye.nowpage = parseInt (put.value ); }Fenye.Page_ma(Fenye.nowpage,Fenye.allpage); Fenye.Pageclick(); Fenye.Creatnews (); Fenye.Nowpagenum (Fenye.nowpage); }}

    【js对象实现数据分页效果】html和css部分
    - 锐客网*{margin:0; padding:0; }li{list-style: none; }.block{position: relative; width:1200px; height:600px; margin:auto; border:1px solid darkblue; }.totle {width:100%; height:40px; display: flex; flex-direction: row; flex:1; background: #b0ffd8; text-align: center; color: #5c5a5c; font-size: 18px; line-height: 40px; }.tot_1 {flex: 1; }.tot_2{flex:2.5; }.list{width:1200px; height:auto; }.pagelist{width:100%; height:35px; border-bottom: 1px solid silver; display: flex; flex-direction: row; text-align: center; }.perchild:nth-child(1) {flex:1; }.perchild:nth-child(2) {flex:1; }.perchild:nth-child(3) {flex:1; }.perchild:nth-child(4) {flex:1; }.perchild:nth-child(5) {flex:1; }.perchild:nth-child(6) {flex:1; }.perchild:nth-child(7) {flex:1; }.perchild:nth-child(8) {flex:2.5; background: pink ; }.footer{position: absolute; bottom:5px; left:10px; }#pageshu> li{width:35px; height:35px; line-height: 35px; display: inline-block; text-align: center; border:1px solid gray; }#back, #go{width:60px; height:35px; line-height: 35px; border:1px solid black; display: inline-block; text-align: center; }#foot_li>li:nth-child(2), #foot_li>li:nth-child(4), #foot_li>li:nth-child(5),#foot_li>li:nth-child(6){display: inline-block; }#foot_li>li:nth-child(4)>input{width:30px; height:20px; outline: none; }#foot_li>li:nth-child(5)>button{background: #000bff; color: #fff; }学号姓名性别年龄班级爱好学分家庭住址
    • 上一页
      • 下一页
      • 跳转到
      • 总页数:

      以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

        推荐阅读


        上一篇：java|java 相交链表的实现示例

        下一篇：SpringBoot中的multipartResolver上传文件配置