使用纯JavaScript实现翻页的功能

最新推荐文章于 2020-09-23 14:21:21 发布

KeleQAQ

最新推荐文章于 2020-09-23 14:21:21 发布

阅读量3.6k

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/KeleQAQ/article/details/106082174

版权

前言: 初学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

希望看见的大佬能教我如何解决这个问题。

KeleQAQ

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
使用纯JavaScript实现翻页的功能

**前言：**初学JS，这个案例是我自己用来学习数组，AJAX,和DOM的。（这里没有用到AJAX！）**原理：**就是把对象储存在一个数组里，翻页显示就是通过数组下标截取数组里的元素。**演示：**![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512183326586.PNG)![在这里插入图片描述](https://img-blog.csdnimg.cn/20200512183422485.PNG)![在这里插入图片描述](https://im
复制链接

扫一扫