纯js实现表格分页效果

最新推荐文章于 2024-05-09 23:45:32 发布

JAVA百练成神

最新推荐文章于 2024-05-09 23:45:32 发布

阅读量926

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45007567/article/details/121102069

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var arr = [
			
				['吴爱敏', '百度1班', 88],
				['钱丽萍', '百度1班', 90],
				['刘文辉', '百度1班', 93],
				['马传占', '百度1班', 96],
				['何欣', '百度1班', 91],
				['范美玲', '百度1班', 66],
				['张伟伟', '百度1班', 72],
				['吴丹丹', '百度1班', 78],
				['周翔宇', '百度2班', 64],
				['鹿军', '百度2班', 77],
				['周洪球', '百度2班', 88],
				['白玉辉', '百度2班', 100],
				
	
			];
			window.onload=function(){
				//页码
				var spans =document.getElementById("spans")
				var index_page=5 //原来下标
				var index=5 //下标
				var tag =0 //多的值
				//获取上一页
				var pagup =document.getElementById("pagup")
				//获取下一页
				var pagdom =document.getElementById("pagdom")
				//获取th元素
				var td =document.getElementsByTagName("th")
				//通过父元素获取到table
				var table =td[0].parentNode.parentNode
				var tr =td[0].parentNode
				//向上取整来获取页码
				spans.innerText="当前是第"+Math.ceil(index/5)+"页/"+Math.ceil(arr.length/5)
				//遍历页码默认的五条数据
				for(var i=0;i<5;i++){
					 table.innerHTML+="<tr><td>"+arr[i][0]+"</td><td>"+arr[i][1]+"</td><td>"+arr[i][2]+"</td></tr>"
				
				}
				//下一页的单击事件
				pagdom.onclick=function(){
				//判断是否到了最后一页
					if(index>=arr.length){
						alert("到屁股了不要翻了")
						
						
					}else{
					//判断剩下的元素是否够五个
					if(index+5>arr.length){
					//不够五个就给他进行相减获取还剩多少个
						var page=(index+5)-arr.length
						index+=page-1
						tag=page
					}else{
					//如果够五个就每次+5 就值原来的基础上加5个
						index+=5
					}
					//把表格给清空
				table.innerHTML="<tr><th>姓名</th><th>班级</th><th>分数</th></tr>"
					//开始给表格赋值
				for(var i=index_page;i<index;i++){
					 
					 table.innerHTML+="<tr><td>"+arr[i][0]+"</td><td>"+arr[i][1]+"</td><td>"+arr[i][2]+"</td></tr>"
					 index_page=index
				}
					spans.innerText="当前是第"+Math.ceil(index/5)+"页/"+Math.ceil(arr.length/5)
				}
				//获取上一页
				pagup.onclick=function(){
					if(index==5){
						alert("到头了不要翻了")
					}else{
						//数据清空
						table.innerHTML="<tr><th>姓名</th><th>班级</th><th>分数</th></tr>"
					var index_1=index_page
					//把他的值-10就能获取到上一页的值 
						for(var i=index_1-10;i<index_page-5;i++){
							 
							 table.innerHTML+="<tr><td>"+arr[i][0]+"</td><td>"+arr[i][1]+"</td><td>"+arr[i][2]+"</td></tr>"
							
						}
				//把值也给-5 不然下一页会到另一页去
							 	if(index>=arr.length){
									index_page-=tag-1
							 		index-=5-(tag)
								}else{
									index_page-=5
							 		index-=5
								}
						
						}
					
						spans.innerText="当前是第"+Math.ceil(index/5)+"页/"+Math.ceil(arr.length/5)
					}
									
					}
					
				
			}
		</script>
	</head>
	<body>
		<table border="1" id="tab" >
			<tr>
				<th>姓名</th>
				<th>班级</th>
				<th>分数</th>
			</tr>

		</table>
		<br />
		
		<a href="#" id="pagup">上一页</a>
		<span id="spans">当前是</span>
		<a href="#" id="pagdom">下一页</a>
		
	</body>
</html>

JAVA百练成神

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
纯js实现表格分页效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> var arr = [ ['吴爱敏', '百度1班', 88], ['钱丽萍', '百度1班', 90], ['刘文辉', '百度1班', 93], ['马传占'
复制链接

扫一扫