js数据分页效果
fanfan_h 人气:0实现数据分页要清楚这个的方面的设计：
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>
加载全部内容