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.提高性能的需要.分 ...
随机推荐
- Android短信验证码倒计时
有两种实现方法 1.第一种方式:Timer /** * Description:自定义Timer * <p> * Created by Mjj on 2016/12/4. */ publi ...
- 详细分析du和df的统计结果为什么不一样
今天有个人问我du和df的统计结果为什么会不同.给他解析了一番,后来想想还是写篇文章从原理上来分析分析. 我们常常使用du和df来获取目录或文件系统已占用空间的情况.但它们的统计结果是不一致的,大多数 ...
- linux --> gcc编译之路径搜索
gcc编译之路径搜索 头文件 --> 搜寻先从-I开始; --> 找gcc的环境变量 : C_INCLUDE_PATH,CPLUS_INCLUDE_PATH,OBJC_INCLUDE_PA ...
- HA集群heartbeat配置--Nginx
HA即(high available)高可用,又被叫做双机热备,用于关键性业务.简单理解就是,两台机器A和B,正常是A提供服务,B待命限制,当A宕机或服务宕掉,会切换至B机器继续提供服务.常用实现高可 ...
- python读取txt、csv、xml
读取txt,无需引入任何包: user_file = open('user_info.txt','r') lines = user_file.readlines() user_file.close() ...
- Java基础学习笔记二十一 多线程
多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...
- Leetcode 28——Implement strStr()
Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...
- chrome浏览器访问google插件
访问google其实很多时候都是为了搜索资料,本文分享下,chrome浏览器访问google插件 下载地址:http://www.ggfwzs.com/ 1,下载完成后,解压: 如下: 2,打开谷歌浏 ...
- Java8学习(4)-Stream流
Stream和Collection的区别是什么 流和集合的区别是什么? 粗略地说, 集合和流之间的差异就在于什么时候进行计算.集合是一个内存中的数据结构,它包含数据结构中目前所有的值--集合中的每个元 ...
- 上海依图-电话面试-angularjs
树的遍历(树结构:node.name,node.children),输出node.name(递归) 指令的scope的绑定策略(@绑定DOM数学单向绑定:=双向数据绑定:&绑定父作用域函数) ...