原理：

先将table的所有<tr>隐藏（除标题<tr>之外），之后通过页码控制，显示出指定的<tr>。

以下是相关源码：

index.html文件

<!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>

pagination.js文件

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";}

原文链接：https://yq.aliyun.com/ziliao/20541

javaScript 实现表格table分页相关推荐

layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
elementui table表格跨分页多选
elementui table表格跨分页多选项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...
layui数据表格table在选项卡tabs中分页条不显示的解决
layui数据表格table在选项卡tabs中分页条不显示的解决解决:渲染后重新设置高度:$(".layui-table-box").css("height" ...
layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
layui table 分页记住之前勾选的数据
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
bootstraptable控制分页_bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

javaScript 实现表格table分页

原理：

index.html文件

pagination.js文件

javaScript 实现表格table分页相关推荐

最新文章

热门文章