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()
}
<!DOCTYPE html><HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
* {
margin: 0
padding: 0
}
#content {
margin: auto
width: 400px
border: 1px solid black
}
.on {
color: red
}
.off {
color: black
}
body {
font-family: "Courier New"
}
ul {
padding: 10px 0px 10px 45px
}
ul li {
color: red
}
</style>
<script type="text/javascript">
window.onload = function() {
Page.arr = Page.pushArr()
Page.setClickPageNum()
Page.allContent("null")
}
var Page = {
defaultPerPageNum: 4,
arr: null,
removedBlankStr: function(str) {
var regex = /^\s*|\s*$/g
return str.replace(regex, "")
},
setTotalPageNums: function() {
var pp = Number(Page.perPageNum('t1'))
var pnums = Page.arr.length / pp > parseInt(Page.arr.length / pp) ? parseInt(Page.arr.length / pp) + 1 : Page.arr.length / pp
var div = document.getElementById('pagenum')
div.innerHTML = ""
for (var i = 0 i < pnums i++) {
var a = document.createElement('a')
a.href = "#"
a.innerHTML = i + 1
a.setAttribute('class', 'off')
div.appendChild(a)
div.innerHTML += " "
}
Page.setClickPageNum()
},
perPageNum: function(PerPageNum) {
var pv = document.getElementById(PerPageNum).value
pv = Page.removedBlankStr(pv)
if ("" == pv || isNaN(pv) || (new RegExp(/^[-]*[0]+.*?$/g).test(pv)) || pv < 0) {
pv = Page.defaultPerPageNum
document.getElementById(PerPageNum).value = pv
}
document.getElementById('p1').innerHTML = pv
return pv
},
getClickPageNum: function(diva) {
return parseFloat(diva.innerHTML)
},
setClickPageNum: function() {
var divx = document.getElementById('pagenum')
var a = divx.children
var len = a.length
for (var i = 0 i < len i++) {
a[i].onclick = function() {
this.className = "on"
Page.allContent(this)
}
}
},
pushArr: function() {
var arr = new Array()
var ul = document.getElementById('ul1')
var len = ul.children.length
for (var i = 0 i < len i++) {
arr.push(ul.children[i])
}
return arr
},
allContent: function(divb) {
var ul = document.getElementById('ul1')
ul.innerHTML = ""
var pp = parseFloat(this.perPageNum('t1'))
if ("null" == divb) {
divb = document.getElementById('pagenum').children[0]
divb.className = "on"
}
var pg = this.getClickPageNum(divb) // 1 2 3
var ppj = pp * (pg - 1) // 0 4 8
var end = ppj + pp // 4 8 12
var arr = this.arr
var pnums = arr.length / pp > parseInt(arr.length / pp) ? parseInt(arr.length / pp) + 1 : arr.length / pp
for (var i = ppj i < end i++) {
var a = arr[i]
if (null != a) {
ul.appendChild(a)
}
}
},
doAction: function() {
Page.perPageNum('t1')
Page.setTotalPageNums()
Page.allContent("null")
}
}
</script>
</HEAD>
<BODY>
<div id='content'>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div id="pagenum"><a href="#" class="on">1</a> <a href="#">2</a> <a href="#">3</a>
</div>
<input type="text" value="4" id="t1" /> 
<input type="button" value="set" onclick="Page.doAction()" />  Each Page
<a id="p1"></a>Records</div>
</BODY>
</HTML>
类似#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>
