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.提高性能的需要.分 ...
随机推荐
- 笔记：MyBatis XML配置-typeAliases 内建别名表
别名 映射的类型 _byte byte _long long _short short _int int _integer int _double double _float float _boole ...
- Django+xadmin打造在线教育平台（六）
九.课程章节信息 9.1.模板和urls 拷贝course-comments.html 和 course-video.html放入 templates目录下 先改course-video.html,同 ...
- spring集成redis
redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列.redis官方没有提供windows版本的软件.windows版本 ...
- 以太坊开发DApp入门教程——区块链投票系统（一）
概述 对初学者,首先要了解以太坊开发相关的基本概念. 学习以太坊开发的一般前序知识要求,最好对以下技术已经有一些基本了解: 一种面向对象的开发语言,例如:Python,Ruby,Java... 前 ...
- Flume日志采集系统
1.简介 Flume是Cloudera提供的一个高可用.高可靠.分布式的海量日志采集.聚合和传输的系统. Flume支持在日志系统中定制各类数据发送方用于收集数据,同时Flume提供对数据进行简单的处 ...
- python全栈学习--day11(函数高级应用)
一,函数名是什么? 函数名是函数的名字,本质:变量,特殊的变量. 函数名()执行此函数 ''' 在函数的执行(调用)时:打散. *可迭代对象(str,tuple,list,dict(key))每一个元 ...
- Beta第一天
听说
- 项目Beta冲刺Day2
项目进展 李明皇 今天解决的进度 优化了信息详情页的布局:日期显示,添加举报按钮等 优化了程序的数据传递逻辑 明天安排 程序运行逻辑的完善 林翔 今天解决的进度 实现微信端消息发布的插入数据库 明天安 ...
- bzoj千题计划242：bzoj4034: [HAOI2015]树上操作
http://www.lydsy.com/JudgeOnline/problem.php?id=4034 dfs序,树链剖分 #include<cstdio> #include<io ...
- PostgreSQL 客户端乱码问题
关于客户端和服务器端的乱码问题, POSTGRESQL字符集问题总结 总结的很详细, 特别棒. 这里让我头痛了很久的问题在于 终端 上字符编码的问题, 由于我的mbp上的 iterm2 的默认编码为 ...