js分页效果
<!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);
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分页效果的更多相关文章
- 非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- JS实现分页效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于js实现分页效果的简单代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【js】使用javascript 实现静态网页分页效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
随机推荐
- JAVA基本数据类型和引用数据类型的区别
[基本数据类型] 基本数据类型:声明时直接在栈内存中开辟空间,并直接在当前内存中存放数据,赋值时传递的是变量中的值,总的来说,基本数据类型是传值的. [引用数据类型] 声明引用数据类型(数组或对象), ...
- Linux Vim查找字符串
一.用/和?的区别:/后跟查找的字符串.vim会显示文本中第一个出现的字符串.?后跟查找的字符串.vim会显示文本中最后一个出现的字符串.二.注意事项:不管用/还是?查找到第一个字符串后,按回车,vi ...
- 关于JSP页面Property [ssid] not found on type [java.lang.String]错误的注意事项
转发于:http://blog.csdn.net/w86440044/article/details/28277177
- 蚂蚁金服安全实验室首次同时亮相BlackHat Asia 以及CanSecWest国际安全舞台
近期,蚂蚁金服巴斯光年安全实验室(以下简称AFLSLab)同时中稿BlackHat Asia黑帽大会的文章以及武器库,同时在北美的CanSecWest安全攻防峰会上首次中稿Android安全领域的漏洞 ...
- Orcle查询优化改写-----给查询结果排序
1.按照子串排序 2.translate
- SSH三大框架的整合
SSH三个框架的知识点 一.Hibernate框架 1. Hibernate的核心配置文件 1.1 数据库信息.连接池配置 1.2 Hibernate信息 1.3 映射配置 1.4 Hibernate ...
- ORA-03206，当表空间不够时，如何以添加数据文件的方式扩展表空间
准备导入一个数据库,大约为33G,开始创建的空库表空间为自增到20G,结果自然不够,然后就开始自动扩展表空间大小 使用的如下语句 --自动扩展表空间大小 ALTER DATABASE DATAFILE ...
- 掌握SQLServer锁的相关概念
一.为什么要引入锁 当多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: ◆丢失更新 A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 ◆脏读 ...
- Dijkstra算法课后补分博客
题目名称:Dijkstra算法 题目要求:课上给出相关附图,求解附图顶点A的单源最短路径. 附图: 做题过程 1.了解Dijkstra算法的相关知识,包括定义以及使用方法. 定义:Dijkstra算法 ...
- QTableView
QTableView常用于实现数据的表格显示.下面我们如何按步骤实现学生信息表格: 一 添加表头 //准备数据模型 QStandardItemModel *student_model = ne ...