本文在html中利用js＋table实现分页。主要思想是先对table中的所有数据隐藏，然后通过当前页面(currPageNum)来计算当前页要显示的行，并显示出来，首页、下一页、上一页、尾页都依此来实现。
可以直接运行。
一、html页面
1. 在页面中直接向table写好数据，定义table的id；
2. 在页面中加入首页、上一页、下一页、尾页，当前页、总页数等标签；
3. 在页面中的javascript部分声明会用到的变量，并写好加载函数，window.onload=function(){...}。
二、js部分
1. 在js文件中依次实现首页、上一页、下一页、尾页等功能；
2. 控制首页等功能的显示与不显示。
以下是代码部分 ，欢迎批评与指正。
js文件为pagination.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title><style type="text/css">
body{
}
table .table-striped{
}
table th{
text-align: left;
height: 30px;
background: #deeeee;
padding: 5px;
margin: 0;
border: 0px;
}
table td{
text-align: left;
height:30px;
margin: 0;
padding: 5px;
border:0px
}
table tr:hover{
background: #eeeeee;
}
.span6{
/*width:500px;*/
float:inherit;
margin:10px;
}
#pagiDiv span{
background:#1e90ff;
border-radius: .2em;
padding:5px;
}
</style>
<script type="text/javascript" src="pagination.js"></script>
<script type="text/javascript">
//全局变量
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.onload=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();
};
</script>
</head>
<body align="center">
<div class="container" align="center" >
<h2 align="center">Recent blocks Found By AntPool</h2>
<table id="blocks" class="table table-striped" style="margin-top:25px">
<tr>
<th>Height</th>
<th>Time</th>
<th class="hidden-phone">Hash</th>
<th class="hidden-phone">Size (kB)</th>
</tr>
<tr>
<td><a href="/block-height/424785">424785</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-12 02:05:22</td>
<td class="hidden-phone"><a href="/block-index/1134734/000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d">000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d</a></td>
<td class="hidden-phone">637.52</td>
</tr>
<tr>
<td><a href="/block-height/424550">424550</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-10 11:24:24</td>
<td class="hidden-phone"><a href="/block-index/1134499/000000000000000004c6a895e2ea6e12ff5e8046454ab663d14b569734228b8d">000000000000000004c6a895e2ea6e12ff5e8046454ab663d14b569734228b8d</a></td>
<td class="hidden-phone">999.15</td>
</tr>
<tr>
<td><a href="/block-height/424544">424544</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-10 10:17:29</td>
<td class="hidden-phone"><a href="/block-index/1134493/0000000000000000053027e87de8298f06e42d30933c9fea3af9c116a5852659">0000000000000000053027e87de8298f06e42d30933c9fea3af9c116a5852659</a></td>
<td class="hidden-phone">999.09</td>
</tr>
<tr>
<td><a href="/block-height/424530">424530</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-10 07:41:23</td>
<td class="hidden-phone"><a href="/block-index/1134479/000000000000000001e1450b8089bac13c69942660f54360abeb0b8a382a5cb5">000000000000000001e1450b8089bac13c69942660f54360abeb0b8a382a5cb5</a></td>
<td class="hidden-phone">626.62</td>
</tr>
<tr>
<td><a href="/block-height/424528">424528</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-10 07:25:05</td>
<td class="hidden-phone"><a href="/block-index/1134477/000000000000000000241a05e40031a7b71c17babbb00255a633c224b8959775">000000000000000000241a05e40031a7b71c17babbb00255a633c224b8959775</a></td>
<td class="hidden-phone">239.95</td>
</tr>
</table>
<div id="pagiDiv" align="right" style="width:1200px">
<span id="spanFirst">First</span>
<span id="spanPre">Pre</span>
<span id="spanNext">Next</span>
<span id="spanLast">Last</span>
The <span id="spanPageNum"></span> Page/Total <span id="spanTotalPage"></span> Page
</div>
</div>
</body>
</html>
/**
* Created by mendez on 16/8/12.
*/
function firstPage(){
hide();
currPageNum = 1;
showCurrPage(currPageNum);
showTotalPage();
for(i = 1; i < pageCount + 1; i++){
blockTable.rows[i].style.display = "";
}
firstText();
preText();
nextLink();
lastLink();
}
function prePage(){
hide();
currPageNum--;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
var lastR = lastRow(firstR);
for(i = firstR; i < lastR; i++){
blockTable.rows[i].style.display = "";
}
if(1 == currPageNum){
firstText();
preText();
nextLink();
lastLink();
}else if(pageNum == currPageNum){
preLink();
firstLink();
nextText();
lastText();
}else{
firstLink();
preLink();
nextLink();
lastLink();
}
}
function nextPage(){
hide();
currPageNum++;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
var lastR = lastRow(firstR);
for(i = firstR; i < lastR; i ++){
blockTable.rows[i].style.display = "";
}
if(1 == currPageNum){
firstText();
preText();
nextLink();
lastLink();
}else if(pageNum == currPageNum){
preLink();
firstLink();
nextText();
lastText();
}else{
firstLink();
preLink();
nextLink();
lastLink();
}
}
function lastPage(){
hide();
currPageNum = pageNum;
showCurrPage(currPageNum);
showTotalPage();
var firstR = firstRow(currPageNum);
for(i = firstR; i < numCount + 1; i++){
blockTable.rows[i].style.display = "";
}
firstLink();
preLink();
nextText();
lastText();
}
// 计算将要显示的页面的首行和尾行
function firstRow(currPageNum){
return pageCount*(currPageNum - 1) + 1;
}
function lastRow(firstRow){
var lastRow = firstRow + pageCount;
if(lastRow > numCount + 1){
lastRow = numCount + 1;
}
return lastRow;
}
function showCurrPage(cpn){
currPageSpan.innerHTML = cpn;
}
function showTotalPage(){
pageNumSpan.innerHTML = pageNum;
}
//隐藏所有行
function hide(){
for(var i = 1; i < numCount + 1; i ++){
blockTable.rows[i].style.display = "none";
}
}
//控制首页等功能的显示与不显示
function firstLink(){firstSpan.innerHTML = "<a href=‘javascript:firstPage();‘>First</a>";}
function firstText(){firstSpan.innerHTML = "First";}
function preLink(){preSpan.innerHTML = "<a href=‘javascript:prePage();‘>Pre</a>";}
function preText(){preSpan.innerHTML = "Pre";}
function nextLink(){nextSpan.innerHTML = "<a href=‘javascript:nextPage();‘>Next</a>";}
function nextText(){nextSpan.innerHTML = "Next";}
function lastLink(){lastSpan.innerHTML = "<a href=‘javascript:lastPage();‘>Last</a>";}
function lastText(){lastSpan.innerHTML = "Last";}
时间： 2024-10-10 14:01:01