本文在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";}