<!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>
纯js实现表格分页效果
最新推荐文章于 2024-07-14 03:41:23 发布