通过JS实现数据分页

通过JS实现数据分页

原理

1. 加载数据；
2. 构造简单页面；
3. 通过JS动态操作数据及界面，实现数据分页。

代码实现

html

1.引用外部js文件

<meta charset="UTF-8">
<title>数据分页</title>
<!--注意调用顺序-->
<script src="js/Data.js"  type="text/javascript"></script>  <!--调用数据-->
<script src="js/PageData.js" type="text/javascript"></script>  <!--调用外部js文件-->

2.构造简单页面

<div id="par">
    <div class="partitle">
        <div>姓名</div>
        <div>年龄</div>
        <div>编号</div>
        <div>地址</div>
        <div>身高</div>
        <div>体重</div>
        <div>血型</div>
        <div>爱好</div>
    </div>
    <div class="datalist"></div>
    <div id="pagenumber">
        <ul class="nav">
            <li id="forward"><button>上一页</button></li>
            <li>
                <ul class="navlist">

                </ul>
            </li>
            <li id="back"><button>下一页</button></li>
            <li>跳转到：<input type="text" id="page"/>页<button id="go">跳转</button></li>
            <li>总共:<span id="total">0</span>页</li>
        </ul>
    </div>
</div>

3.设置相关css样式

js文件（主要代码）

1.设置页面初始值

allData:beauty, //获取所有数据
pageNumber:5, //设置每一页的数据数量
totalPage:0,   //设置总页数初始值为0
pageNowData:[],  //利用数组存储当前页数据
pageNow:1,  //设置初始页为1

2.获取页面主要元素，进行动态操作

navlist:document.querySelector(".navlist"),
datalist:document.querySelector(".datalist"),
forward:document.querySelector("#forward"),
back:document.querySelector("#back"),
total:document.querySelector("#total"),
pageText:document.querySelector("#page"),
go:document.querySelector("#go"),

3.通过设置每一页的数据数量及总数据计算页面的总页数

calTotalPage:function(){
    this.totalPage=Math.ceil(this.allData.length/this.pageNumber);
}

4.获取每一页数据

getPageNowData:function(num){
    var firstindex=(num-1)*this.pageNumber;
    var lastindex=firstindex+5;
    this.pageNowData=this.allData.slice(firstindex,lastindex);
    }

5.根据总页数和每页数据数创建页码

createNumberLi:function(current,total){
    var str="";
    for(var i=1;i<=total;i++){
       /页码/前缩
        if(i==2&&current-2>i){
            i=current-2;
            str+="<li>...</li>";
        }
        else if(i==current+2&&current+2<total){
        //后缩
            i=total-1;
            str+="<li>...</li>";
        }
        else{
            if(i==current){
                str+="<li class='linum' style='background:pink;color:black;border:none'>"+i+"</li>";
            }
            else{
                str+="<li class='linum'>"+i+"</li>";
            }
        }
    }
    this.navlist.innerHTML=str;
}

6.动态根据数据创建元素

createNowDataEle:function(){
    //清空
    this.datalist.innerHTML="";
    //根据当前页的数据创建元素
    for(var i=0;i<this.pageNumber;i++){
        var div=document.createElement("div");
        div.className="divlist";
        for(var key in this.pageNowData[i]){
            var divchild=document.createElement("div");
            divchild.className="divchild";
            divchild.innerHTML=this.pageNowData[i][key];
            div.appendChild(divchild);
        }
        this.datalist.appendChild(div);
    }
}

7.动态元素事件

getlinumAddEvent:function(){
    var that=this;
    var lilist=document.getElementsByClassName("linum");
    for(var i=0;i<lilist.length;i++){
        lilist[i].onclick=function(){
            that.pageNow=parseInt(this.innerHTML);
            that.createNumberLi(that.pageNow,that.totalPage);
            that.getlinumAddEvent();
            that.getPageNowData(that.pageNow);
            that.createNowDataEle();
        }
    }
}

8.固定元素事件

addEvent:function(){
       var that=this;
        //为上一页按钮添加点击事件
        that.forward.onclick=function(){
            that.pageNow--;
            if(that.pageNow<1){
                that.pageNow=1;
            }
            that.createNumberLi(that.pageNow,that.totalPage);
            that.getlinumAddEvent();
            that.getPageNowData(that.pageNow);
            that.createNowDataEle();
        };
        //为下一页按钮添加点击事件
        that.back.onclick=function(){
            that.pageNow++;
            if(that.pageNow>that.totalPage){
                that.pageNow=that.totalPage;
            }
            that.createNumberLi(that.pageNow,that.totalPage);
            that.getlinumAddEvent();
            that.getPageNowData(that.pageNow);
            that.createNowDataEle();
        };
         //为跳转按钮添加点击事件
        that.go.onclick=function(){
            that.pageNow=parseInt(that.pageText.value);
            if(that.pageNow>that.totalPage){
                that.pageNow=that.totalPage;
            }
            that.createNumberLi(that.pageNow,that.totalPage);
            that.getlinumAddEvent();
            that.getPageNowData(that.pageNow);
            that.createNowDataEle();
        }
    }
};

9.获取总共的页面数，并加入页面中显示

Paging.total.innerHTML=Paging.totalPage;

实现效果

知识点

1.object转String及String转object：JSON.parse() JSON.stringify()

var str=JSON.stringify(info);
console.log(str);
console.log(JSON.parse(str));
console.log(eval(str));//报错

2.this的指代

• 代表当前事件的执行对象
• 代表window对象
• 代表当前的枚举对象或者实例化对象