js分页效果

js分页效果

<!DOCTYPE html>

<head>

<title>Document</title>

//创建xhr对象

function XHR(){

var xhr;

if(window.XMLHttpRequest){// ie7+ 火狐谷歌

xhr=new XMLHttpRequest();

}else{

xhr = new ActiveObject("Microsoft.XMLHTTP"); //ie6

}

return xhr;

}

var pageSize=10;

var index=0;//全局变量

var response;

function uu(){

for(var k=index*pageSize;k<index*pageSize+pageSize;k++){

var tr=document.createElement("tr");

//name

var name=document.createElement("td");

name.innerHTML=response[k].name;

tr.appendChild(name);

//age

var age=document.createElement("td");

age.innerHTML=response[k].age;

tr.appendChild(age);

//sex

var sex=document.createElement("td");

sex.innerHTML=response[k].sex;

tr.appendChild(sex);

//phone

var phone=document.createElement("td");

phone.innerHTML=response[k].phone;

tr.appendChild(phone);

//address

var address=document.createElement("td");

address.innerHTML=response[k].address;

tr.appendChild(address);

//qq

var qq=document.createElement("td");

qq.innerHTML=response[k].qq;

tr.appendChild(qq);

tbody.appendChild(tr);

}

window.onload=function(){

var xhr=XHR();

xhr.open("post","person.json",true);

xhr.onreadystatechange=function(){

var box=document.getElementById("box");

var box_span=box.getElementsByTagName("span");

var tbody=document.getElementById("tbody");

var currentPage=document.getElementById("currentPage");

var prev=document.getElementById("prev");

var next=document.getElementById("next");

if(xhr.readyState==4&&xhr.status==200){

response=JSON.parse(xhr.responseText);

//totalPage 总页数=数据的长度/每页显示的记录数

var totalPage=0;

// 每页显示的记录数

var num=response.length;//数据的长度

//totalPage=num/pageSize;

//判断数据长度/每页显示的记录数如果不能整除时也算一页

if(num/pageSize > parseInt(num/pageSize)){

totalPage=parseInt(num/pageSize)+1;

}else{

totalPage=parseInt(num/pageSize);

}

console.log(totalPage);

//总共页数

var totalPage_a=document.createElement("a");

totalPage_a.innerHTML="总共"+totalPage+"页";

box.appendChild(totalPage_a);

//当前是第1页

var currentPage=document.createElement("a");

currentPage.innerHTML="当前是第1页";

currentPage.id="currentPage";

box.appendChild(currentPage);

//循坏分页 totalPage

for(var i=0;i<totalPage;i++){

var span=document.createElement("span");

span.setAttribute("index",i);

span.innerHTML="第"+(i+1)+"页";

box.appendChild(span);

if(i==0){

span.innerHTML="首页";

span.className="on";

}

if(i==totalPage-1){

span.innerHTML="尾页";

}

//上一页

var prev=document.createElement("a");

prev.innerHTML="上一页";

prev.id="prev";

box.appendChild(prev);

//下一页

var next=document.createElement("a");

next.innerHTML="下一页";

next.id="next";

box.appendChild( next);

//对象每页按钮添加事件

for(var j=0;j<box_span.length;j++){

box_span[j].onclick=function(){

index=Number(this.getAttribute("index"));

console.log(index);

tbody.innerHTML=" ";

currentPage.innerHTML="当前是第"+(index+1)+"页";

for(var m=0;m<box_span.length;m++ ){

box_span[m].className="";

}

this.className="on";

uu();

}

//点击上一页

prev.onclick=function(){

console.log(index);

if(index>=5){

box_span[index].style.display="none";

//box_span[index].style.display="inline-block";

box_span[index-1].style.display="inline-block";

}

index--;

if(index<=0){

index=0;

}

currentPage.innerHTML="当前是第"+(index+1)+"页";

tbody.innerHTML=" ";

for(var n=0;n<box_span.length;n++){

box_span[n].className="";

}

box_span[index].className="on";

uu();

}

//点击下一页

next.onclick=function(){

index++;

if(index>=totalPage){

index=totalPage-1;

}

currentPage.innerHTML="当前是第"+(index+1)+"页";

tbody.innerHTML=" ";

for(var n=0;n<box_span.length;n++){

box_span[n].className="";

}

box_span[index].className="on";

uu();

// 分页数大于5 页时，对应index的分页显示，它的上一个隐藏

if(index>=5){

box_span[index].style.display="inline-block";

box_span[index-1].style.display="none";

}

uu();

}

// 分页数大于5 页时，隐藏5后面的分页，最后一个不隐藏

for(var h=5;h<box_span.length-1;h++){

box_span[h].style.display="none";

}

xhr.send();

}

</script>

<style>

*{padding: 0px;margin:0px;}

#box a{margin-left: 10px;}

#box span{margin-left: 10px;}

.on{background-color: red;}

</style>

</head>

<body>

<thead>

<tr>

<th>phone</th>

<th>address</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

相关文章