js对象实现数据分页效果

更新时间：2021年09月17日 10:23:34 作者：fanfan_h

这篇文章主要为大家详细介绍了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;  //0
            var last=n*this.perpage ;  //10
            this.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>5
                   i=current-1;
                   str+="<li>...</li>";
               }
               else if(i==current+4 && current+4<totle){
                   i=totle-1;
                   str+="<li>...</li>"; //������  current<16

               }
               else{
                   if(current==i){
                   str+="<li class='minilist' style='background: pink'>"+i+"</li>"   ;
                   }
                   else{
                       str+="<li class='minilist'>"+i+"</li>";

                   }
               }
           }
           this .pageshu.innerHTML= str;
        },

5.点击页数时，会跳转到当前页数的数据，并进行相应的缩进

Pageclick:function(){
            var mini_list=document.getElementsByClassName ("minilist");
            for(var k=0;k <mini_list.length;k++){
               mini_list[k].onclick=function(){
                  Fenye.nowpage=parseInt (this.innerHTML  );
                 // console.log(this.innerHTML);  //mini_list[k] ������ı�
                  Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
                  Fenye.Pageclick();
                  Fenye.Creatnews ();
                  Fenye.Nowpagenum (Fenye.nowpage);

               }

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);
            }

        }

html和css部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/message1.js " type="text/javascript "></script>
    <script src="js/pagenews.js " type="text/javascript "></script>
    <style>
        *{
            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;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="totle">
        <div class="tot_1">学号</div>
        <div class="tot_1">姓名</div>
        <div class="tot_1">性别</div>
        <div class="tot_1">年龄</div>
        <div class="tot_1">班级</div>
        <div class="tot_1">爱好</div>
        <div class="tot_1">学分</div>
        <div class="tot_2">家庭住址</div>
    </div>
    <div class="list">

    </div>
    <div class="footer">
        <ul id="foot_li">
            <li id="back">上一页</li>
            <li>
                <ul id="pageshu">

                </ul>
            </li>
            <li id="go">下一页</li>
            <li>跳转到<input id="in_put" type="text"/> </li>
            <li><button id="tiao">跳转</button></li>
            <li>总页数:<span id="tot"></span></li>
        </ul>

    </div>
</div>
</body>
</html>

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

您可能感兴趣的文章:

layui从数据库中获取复选框的值并默认选中方法
今天小编就为大家分享一篇layui从数据库中获取复选框的值并默认选中方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
setTimeout学习小结
本文主要介绍了setTimeout原理；setTimeout(function(){..},0)的意义；setTimeout的this指向和参数问题。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
学习Bootstrap滚动监听附调用方法
这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法，感兴趣的小伙伴们可以参考一下
2016-07-07
javascript上下方向键控制表格行选中并高亮显示的方法
这篇文章主要介绍了javascript上下方向键控制表格行选中并高亮显示的方法,涉及javascript针对键盘按键操作相应的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解
这篇文章主要介绍了Net微信网页开发使用微信JS-SDK获取当前地理位置过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
js属性对象的hasOwnProperty方法的使用
这篇文章主要介绍了js属性对象的hasOwnProperty方法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
学习JavaScript设计模式(代理模式)
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍代理模式，对代理模式进行详细剖析，感兴趣的小伙伴们可以参考一下
2015-12-12
MUI顶部选项卡的用法(tab-top-webview-main)详解
最近用MUI做手机app应用的时候，遇到的小bug，这里小编给大家分享MUI顶部选项卡的用法(tab-top-webview-main)详解，感兴趣的朋友一起看看吧
2017-10-10
input输入框的自动匹配(原生代码)
功能要求:使用原生代码实现，不可使用任何框架、只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗、通过键盘上的上下箭头可以对菜单进行选择等等，感兴趣的你可以参考下
2013-03-03
JavaScript简单实现动态改变HTML内容的方法示例
这篇文章主要介绍了JavaScript简单实现动态改变HTML内容的方法,结合实例形式分析了javascript简单获取及修改HTML元素的相关操作技巧,非常简单易懂,需要的朋友可以参考下
2018-12-12

js对象实现数据分页效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具