html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>
无标题文档
</title>
</head>
<style>
body{ margin:0pxpadding:0pxfont:"
宋体
"font-size:12px}
.dede_pages {
text-align: center
}
ul {
list-style: none outside none}
.dede_pages ul {
float: none
margin: 0 auto
padding: 12px 0 12px 16px
}
.dede_pages ul li.nohref {
border: 1px solid #DDDDDD
color: #8B8B8B
padding: 2px 4px
text-align: center
}
.dede_pages ul li {
float: left
margin-right: 4px
text-align: center
}
.dede_pages ul li.on {
background-color: #669900
border: 1px solid #669900
color: #FFFFFF
font-weight: bold
padding: 2px 4px
text-align: center
}
.dede_pages ul li a {
border: 1px solid #669900
color: #607C27
float: left
padding: 2px 4px
text-align: center
}
a {
color: #3366CC
text-decoration: none
}
</style>
<body>
<div class="dede_pages">
<ul class="pagelist">
<li class="nohref">
首页
</li>
<li class="on">1</li>
<li><a href="p2.html">2</a></li>
<li><a href="p3.html">3</a></li>
<li><a href="p4.html">4</a></li>
<li><a href="p5.html">5</a></li>
<li><a href="p6.html">6</a></li>
<li><a href="p7.html">7</a></li>
<li><a href="p8.html">8</a></li>
<li><a href="p2.html">
下一页
</a></li>
<li><a href="p8.html">
末页
</a></li>
</ul>
</div>
</body>
</html>
这是一个基础的html页面可以参考下
html 前端分页代码怎么写,纯JavaScript实现的前端分页代码 转载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()
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）