前言: 初学JS，这个案例是我自己用来学习数组，AJAX,和DOM的。（这里没有用到AJAX！）
原理: 就是把对象储存在一个数组里，翻页显示就是通过改变数组下标选取数组里的元素，然后显示出来。
演示：
实现：
这里直接创建了5个JS对象存在数组里，模拟从AJAX返回的数据。
<script>
var array=[];
var obj1={
title:"JAVA入门",
author:"小红",
publish:"工业出版社",
tag:"计算机"
};
var obj2={
title:"C入门",
author:"小明",
publish:"工业出版社",
tag:"计算机"
};
var obj3={
title:"湖北菜大全",
author:"大强",
publish:"人民出版社",
tag:"菜谱"
};
var obj4={
title:"健身舞蹈",
author:"张小姐",
publish:"人民出版社",
tag:"舞蹈"
};
var obj5={
title:"英语口语",
author:"可乐",
publish:"湖北出版社",
tag:"英语"
};
array.push(obj1,obj2,obj3,obj4,obj5);
</script>
主要的HTML代码：
<input type="text" id="inputtext" />
<input type="button" id="sub" value="提交" onclick="showData()"/>
<table id="tab">
<thead id="tabhead">
<!-- 显示表头 -->
</thead>
<tbody id="tabcontext">
<!-- 开始显示内容 -->
<!-- 设置每次最多显示2行类容 -->
</tbody>
<tfoot id="tabfoot">
<!-- 显示表尾 -->
</tfoot>
</table>
下面是完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现分页</title>
</head>
<body>
<script>
var array=[];
var obj1={
title:"JAVA入门",
author:"小红",
publish:"工业出版社",
tag:"计算机"
};
var obj2={
title:"C入门",
author:"小明",
publish:"工业出版社",
tag:"计算机"
};
var obj3={
title:"湖北菜大全",
author:"大强",
publish:"人民出版社",
tag:"菜谱"
};
var obj4={
title:"健身舞蹈",
author:"张小姐",
publish:"人民出版社",
tag:"舞蹈"
};
var obj5={
title:"英语口语",
author:"可乐",
publish:"湖北出版社",
tag:"英语"
};
array.push(obj1,obj2,obj3,obj4,obj5);
</script>
<input type="text" id="inputtext" />
<input type="button" id="sub" value="提交" onclick="showData()"/>
<table id="tab">
<thead id="tabhead">
<!-- 这里开始显示表头 -->
</thead>
<tbody id="tabcontext">
<!-- 这里开始显示内容 -->
<!-- 设置每次最多显示2行类容 -->
</tbody>
<tfoot id="tabfoot">
<!-- 这里开始显示表尾 -->
</tfoot>
</table>
<script>
var totalPage=0;//totalPage是总分页数
var e=2;//e 是每页显示多少行数据
var totalCount=0;//totalCount是总共有多少行数据
var currentPage=1;//currentPage是当前页面，初始为1
var firstDate=0;//每个页面的第1个数据的数组下标
var lastDate=e-1;//每个页面的最后1个数据的数组下标
totalCount=array.length;
totalPage=(totalCount%e==0?totalCount/e:parseInt(totalCount/e+1));//求出总分页数
function showData(){
//每次显示前先清空数据,防止重复显示
document.getElementById("tabhead").innerHTML="";
document.getElementById("tabfoot").innerHTML="";
document.getElementById("tabcontext").innerHTML="";
//显示表头和表尾
document.getElementById("tabhead").innerHTML="<tr><td>书名</td>"+
"<td>作者</td>"+
"<td>出版社</td>"+
"<td>标签</td></tr>"
document.getElementById("tabfoot").innerHTML="<tr><td><input type=\"button\" value=\"上一页\" id=\"pre\" onclick=\"showPre()\" /></td>"+
"<td><input type=\"button\" value=\"第1页\" id=\"current\" /></td>"+
"<td><input type=\"button\" value=\"下一页\" id=\"next\" onclick=\"showNext()\"/></td>"+
"<td><input type=\"button\" value=\"共"+totalCount+"条记录\" id=\"sum\" /></td>";
show(firstDate,lastDate);//显示数据函数
}
function showPre(){
//判断是否是边界
if(currentPage<=1){
alert("没有更多记录！");
}else{
firstDate-=e;
lastDate-=e;
currentPage--;
document.getElementById("current").setAttribute("value","第"+currentPage+"页");
show(firstDate,lastDate);
}
}
function showNext(){
//判断是否是边界
if(currentPage>=totalPage){
alert("没有更多记录！");
}else{
firstDate+=e;
lastDate+=e;
currentPage++;
document.getElementById("current").setAttribute("value","第"+currentPage+"页");
show(firstDate,lastDate);
}
}
function show(first,last){
document.getElementById("tabcontext").innerHTML="";//清空数据
if(last>array.length-1){
last=array.length-1;
}
for(;first<=last;first++){
var fathernode=document.getElementById("tabcontext");
var trele=document.createElement("tr");
fathernode.appendChild(trele);
var tds="<td>"+array[first].title+"</td>"+
"<td>"+array[first].author+"</td>"+
"<td>"+array[first].publish+"</td>"+
"<td>"+array[first].tag+"</td>";
trele.innerHTML=tds;
}
}
</script>
</body>
</html>
总结： 基本可以跑起来，但有一个问题。当显示最后一页内容，然后单击下一页时，在Chrom浏览器的开发者模式下会发现有一个警告！（或者是第一页时，点击上一页按钮）
看别人的帖子这个好像是变量的作用域问题。
http://www.imooc.com/qadetail/341320
希望看见的大佬能教我如何解决这个问题。
1591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
