2021-06-19 11:07:20
守望之鹰
码龄3年
关注
最近我遇到问题,就是控制table表格的行不要太长,这里最简单方便的方法就是用前端分页,控制表格显示的行数,在网上找了一番,终于找到一个比较合适的前端分页代码。示例如下:
html代码:
//全局变量
var numCount//数据总数量
var columnsCounts//数据列数量
var pageCount//每页显示的数量
var pageNum//总页数
var currPageNum //当前页数
//页面标签变量
var blockTable
var preSpan
var firstSpan
var nextSpan
var lastSpan
var pageNumSpan
var currPageSpan
window.οnlοad=function(){
//页面标签变量
blockTable = document.getElementById("blocks")
preSpan = document.getElementById("spanPre")
firstSpan = document.getElementById("spanFirst")
nextSpan = document.getElementById("spanNext")
lastSpan = document.getElementById("spanLast")
pageNumSpan = document.getElementById("spanTotalPage")
currPageSpan = document.getElementById("spanPageNum")
numCount = document.getElementById("blocks").rows.length - 1//取table的行数作为数据总数量(减去标题行1)
alert(numCount)
columnsCounts = blockTable.rows[0].cells.length
pageCount = 5
pageNum = parseInt(numCount/pageCount)
if(0 != numCount%pageCount){
pageNum += 1
}
firstPage()
}
类似#home这种链接是在一个页面内的跳转,跳转到的位置我们称之为“锚点”。下面的代码存到index.html即可查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: fixedtop: 0left: 0background-color: #fff">
<a href="#home">首页</a>
<a href="#page2">page2</a>
<a href="#page3">page3</a>
</div>
<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">
<a id="home"></a>
<br><br>
这里是首页部分
</div>
<div style="height: 800pxborder: 1px solid #dddpadding-top: 35px">
<a id="page2"></a>
<br><br>
这里是page2部分
</div>
<div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px">
<a id="page3"></a>
<br><br>
这里是page3部分
</div>
</body>
</html>
额。。。。做分页应该是直接从数据库那里拿数据的时候做的吧,你是全写静态了?反正我做的是数据库sql语句读数据库的时候读出多少到多少的,也就是比如第二页就是输出第21-40条这种,所以没这个问题,只要传一个请求的页码和搜索的条件就好,然后如果读不出数据就显示另一个页码,比如您查找的东西没找到啥米的。。。。你这个的话,要不就是先判断下是否存在那个文件,如果不存在就跳转到目录。。。。
你看下这个:http://blog.csdn.net/foart/article/details/3984928
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)