<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script>

//创建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>

<table border="1" id="tab">

<thead>

<tr>

<th>name</th>

<th>age</th>

<th>sex</th>

<th>phone</th>

<th>address</th>

<th>qq</th>

</tr>

</thead>

<tbody id="tbody">

</tbody>

</table>

<div id="box">

</div>

</body>

</html>

js分页效果的更多相关文章

  1. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  2. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  3. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. JS实现分页效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 关于js实现分页效果的简单代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 原生js显示分页效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 【js】使用javascript 实现静态网页分页效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...

  9. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

随机推荐

  1. 笔记：Spring Cloud Hystrix 异常处理、缓存和请求合并

    异常处理 在 HystrixCommand 实现的run方法中抛出异常,除了 HystrixBadRequestException之外,其他异常均会被Hystrix 认为命令执行失败并触发服务降级处理 ...

  2. MYSQL数据库学习十 单表数据记录查询

    10.1 简单数据记录查询 SELECT field1,field2,...fieldn FROM table_name; “*” ——查询所有记录 SELECT * FROM table_name; ...

  3. 【Python】 命名空间与LEGB规则

    命名空间与LEGB规则 之前隐隐约约提到过一些关于Python赋值语句的特殊性的问题,这个问题的根源就在于Python中的变量的命名空间机制和之前熟悉的C也好java也好都不太一样. ■ 命名空间 所 ...

  4. 【CSS】 CSS 定位

    css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...

  5. 控制input只能输入数字和两位小数

    <input type="text" name="je" onkeyup="clearNoNum(this)" /> funct ...

  6. c++ --> 你可能不知道的c++

    你可能不知道的c++ 你可能不知道的 C++(一) 你可能不知道的 C++(二)

  7. 指令-arModal-点击提示框模板

    html 使用<ar-modal></ar-modal>: <ar-modal modal-obj="modalObj" ok="newAl ...

  8. 201621123043 《Java程序设计》第2周学习总结

    1.本周学习总结 使用jdk文档查阅函数功能及代码 用switch语句是在每个case中可能在第一行是sc.nextLine;来给回车赋值: 在使用循环的时候要注意循环返回的条件,否则陷入死循环可能会 ...

  9. Python 远程部署 Fabric

    参考文章:http://zmrenwu.com/post/21/ Fabric是一个Python的库,它提供了丰富的同SSH交互的接口,可以用来在本地或远程机器上自动化.流水化地执行Shell命令.因 ...

  10. axios封装

    前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...