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.提高性能的需要.分 ...
随机推荐
- 浅谈XAML控件
在win10系统内简单使用了XAML控件,由于本人英语水平有限,在自己的摸索使用.分析代码以及翻译软件.搜索引擎.室友情的帮助下了解了控件的相关功能,下面简要对XAML控件提出几点建议: 1.Cale ...
- 爬虫（BeautifulSoup--select--class的选择）
<div class="item name" title="中央公园"> <a href="/Attraction_Review-g ...
- js和jquery判断checkbox是否被选中
js判断: if(document.getElementById("checkboxID").checked){ alert("checkbox is checked&q ...
- 有序的map LinkedHashMap
HashMap是无序的,HashMap在put的时候是根据key的hashcode进行hash然后放入对应的地方.所以在按照一定顺序put进HashMap中,然后遍历出HashMap的顺序跟put的顺 ...
- Beta冲刺第二天
一.昨天的困难 没困难 二.今天进度 局部测试并修复出现的bug 1.林洋洋:修复登录页面显示问题,修复日程查询问题 2.黄腾达:修复创建协作开始时间和结束时间没做检验的问题 3.张合胜:修复页面内容 ...
- 冲刺No.4
Alpha冲刺第四天 站立式会议 项目进展 今日团队开始对项目的核心功能中的事务管理员模块与学生模块进行了编码,主要内容是对学生基本信息的增删改与事务管理员信息的增删改,这部分的内容是整个项目最基础的 ...
- iOS极光推送SDK的使用流程
一.极光推送简介 极光推送是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,整合了iOS.Android和WP平台的统一推送服务.使用起来方便简单,已于集成,解决了原生远程推送繁 ...
- django获取ip与数据重复性判定
获取ip if request.META.has_key('HTTP_X_FORWARDED_FOR'): ip_c = request.META['HTTP_X_FORWARDED_FOR'] el ...
- python的迭代器、生成器、装饰器
迭代器.生成器.装饰器 在这个实验里我们学习迭代器.生成器.装饰器有关知识. 知识点 迭代器 生成器 生成器表达式 闭包 装饰器 实验步骤 1. 迭代器 Python 迭代器(Iterators)对象 ...
- socket_sever实现多客户端并发
#!/usr/bin/env python # -*- coding:utf-8 -*- import socketserver class mysever(socketserver.BaseRequ ...