本文在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{ /*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="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";}