本文在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" src="jquery-1.11.1.min.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/424784">424784</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-12 01:59:57</td>
<td class="hidden-phone"><a href="/block-index/1134733/000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0">000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0</a></td>
<td class="hidden-phone">275.59</td>
</tr>
<tr>
<td><a href="/block-height/424782">424782</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-12 01:39:55</td>
<td class="hidden-phone"><a href="/block-index/1134731/0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826">0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826</a></td>
<td class="hidden-phone">998.19</td>
</tr>
<tr>
<td><a href="/block-height/424781">424781</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-12 01:38:01</td>
<td class="hidden-phone"><a href="/block-index/1134730/0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748">0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748</a></td>
<td class="hidden-phone">270.23</td>
</tr>
<tr>
<td><a href="/block-height/424778">424778</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-12 01:31:07</td>
<td class="hidden-phone"><a href="/block-index/1134727/00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e">00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e</a></td>
<td class="hidden-phone">997.83</td>
</tr>
<tr>
<td><a href="/block-height/424760">424760</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 22:52:52</td>
<td class="hidden-phone"><a href="/block-index/1134709/00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5">00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5</a></td>
<td class="hidden-phone">638.13</td>
</tr>
<tr>
<td><a href="/block-height/424754">424754</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 22:23:47</td>
<td class="hidden-phone"><a href="/block-index/1134703/000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555">000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555</a></td>
<td class="hidden-phone">998.05</td>
</tr>
<tr>
<td><a href="/block-height/424749">424749</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 21:12:14</td>
<td class="hidden-phone"><a href="/block-index/1134698/000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318">000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318</a></td>
<td class="hidden-phone">994.33</td>
</tr>
<tr>
<td><a href="/block-height/424732">424732</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 18:46:18</td>
<td class="hidden-phone"><a href="/block-index/1134681/0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634">0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634</a></td>
<td class="hidden-phone">998.16</td>
</tr>
<tr>
<td><a href="/block-height/424730">424730</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 18:36:30</td>
<td class="hidden-phone"><a href="/block-index/1134679/0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788">0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788</a></td>
<td class="hidden-phone">998.16</td>
</tr>
<tr>
<td><a href="/block-height/424716">424716</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 16:21:42</td>
<td class="hidden-phone"><a href="/block-index/1134665/000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161">000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161</a></td>
<td class="hidden-phone">998.03</td>
</tr>
<tr>
<td><a href="/block-height/424710">424710</a> <font color="green">(Main Chain)</font></td>
<td>2016-08-11 15:10:04</td>
<td class="hidden-phone"><a href="/block-index/1134659/000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e">000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e</a></td>
<td class="hidden-phone">0.21</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";}
