<!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. [Usaco 5.4] Telecowmunication

    Description 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,...,a(c), ...

  2. Linux下mysql的常用操作

    Linux下mysql的常用操作: 显示数据库 show databases; 选择数据库 use 数据库名; 显示数据库中的表 show tables; 显示数据表的结构 describe 表名; ...

  3. Java高级篇（一）——线程

    前面我们系统的了解了Java的基础知识,本篇开始将进入到Java更深层次的介绍,我们先来介绍一下Java中的一个重要的概念--线程. 一.什么是线程 在了解线程前,我们首先要了解进程的概念.进程是操作 ...

  4. PHP 设计模式阅读清单

    社区文章推荐 S.O.L.I.D 面向对象设计和编程(OOD&OOP)笔记 浅谈 Laravel 设计模式 PHP 完整实战 23 种设计模式 Laravel Dependency Injec ...

  5. Konckout第二个实例：数组数据类型双向绑定 -- 下拉select

    自定义js做法: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  6. The Beginning of the Graph Theory

    The Beginning of the Graph Theory 是的,这不是一道题.最近数论刷的实在是太多了,我要开始我的图论与树的假期生活了. 祝愿我吧??!ShuraK...... poj18 ...

  7. 云服务器Windows Server2012 配置http服务器(又称Web服务器，IIS)

    出错:无法打开运行空间池.服务器管理器WinRM插件可能已损坏或丢失. 解决方法: http://shiyousan.com/post/636308065767125916 第一步是开启WinRM服务 ...

  8. Beta 第三天

    今天遇到的困难: 组员对github极度的不适应 github的版本控制和协同化编程确实操作起来需要一定的熟练度,我们缺乏这种熟练度 Android Studio版本不一致项目难以打开的问题仍然无法解 ...

  9. 网络1711c语言第3次作业总结

    作业地址:https://edu.cnblogs.com/campus/jmu/JMUC--NE17111712/homework/1166 总结 1.评分细则 评分注意事项 注意用Markdown语 ...

  10. PTA題目的處理（三）

    题目7-1 高速公路超速處罰 1.實驗代碼 #include <stdio.h> //#include <stdlib.h> int main() { int csp,lsp; ...