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.提高性能的需要.分 ...
随机推荐
- linux新建用户登录不了
useradd----创建用户命令 简单的创建普通用户(当然得在root登录下执行) useradd username -p password userdel username 删除用户 用上面的命令 ...
- C# Int 类型线程不安全
之前统计报表算法做了一个优化,一个查询二十分钟导致客户端超时,优化到只需要5秒钟.后来发现for循环里数据合并的时候耗时,就用并行做优化.但是发现并行后丢居然数据(当然是因为List线程不安全). 前 ...
- js获取input file文件二进制码
<html> <body> <img id="image"src=""/> <br/> <input ty ...
- ava集合---HashSet的源码分析
一.HasnSet概述 Hashset实现set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set的迭代顺序.特别是它不保证该顺序恒久不变.此类允许使用Null元素 一.HasnSe ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- DevOps实践之Jenkins安装部署
Prerequisites Minimum hardware requirements: 256 MB of RAM 1 GB of drive space (although 10 GB is a ...
- 基于Multiple treatment的营销评估算法
营销是发现或挖掘准消费者和众多商家需求,通过对自身商品和服务的优化和定制,进而推广.传播和销售产品,实现最大化利益的过程.例如,银行可通过免息卡或降价对处在分期意愿边缘的用户进行营销,促使其分期进而提 ...
- JSP、Servlet、JDBC学习笔记
WEB的学习 * 服务器 * 网络的架构(面试题) * C/S client/server 客户端/服务器端 例子:QQ 快播 暴风影音 * 优点:交互性好,服务器压力小. * 缺点:客户端更新了,下 ...
- SpringMVC之处理流程
之前在学servlet时写过JavaWeb与Asp.net工作原理比较分析,那篇主要是大致描述了下servlet的工作流程,今天在家了解了下springmvc的工作原理,与asp.net中的mvc进行 ...
- Beta第三天
听说