纯 JavaScript 实现的前端分页代码

—

by

FeanLau
in

最近我遇到问题，就是控制 table 表格的行不要太长，这里最简单方便的方法就是用前端分页，控制表格显示的行数，在网上找了一番，终于找到一个比较合适的前端分页代码。示例如下：

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
<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">表格</h2>
		<table id="blocks" class="table table-striped" style="margin-top: 25px">
			<tr>
				<th>体重</th>
				<th>时间</th>
				<th class="hidden-phone">网址</th>
				<th class="hidden-phone">大小(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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baiu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</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="#">baidu.com</a>
				</td>
				<td class="hidden-phone">0.21</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="#">baidu.com</a>
                </td>
                <td class="hidden-phone">0.21</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="#">baidu.com</a>
                </td>
                <td class="hidden-phone">0.21</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="#">baidu.com</a>
                </td>
                <td class="hidden-phone">0.21</td>
            </tr>

		</table>

		<div id="pagiDiv" align="right" style="width: 1200px">
			<span id="spanFirst">第1页</span>&nbsp;&nbsp; 
			<span id="spanPre">前1页</span>&nbsp;&nbsp;
			<span id="spanNext">下1页</span>&nbsp;&nbsp; 
			<span id="spanLast">最后1页</span>&nbsp;&nbsp;
			第&nbsp;<span id="spanPageNum"></span>&nbsp;页/总共&nbsp;<span id="spanTotalPage"></span>&nbsp;页
		</div>
	</div>
</body>
</html>

main.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;
}

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();'>第1页</a>";
}
function firstText() {
	firstSpan.innerHTML = "第1页";
}

function preLink() {
	preSpan.innerHTML = "<a href='javascript:prePage();'>前1页</a>";
}
function preText() {
	preSpan.innerHTML = "前1页";
}

function nextLink() {
	nextSpan.innerHTML = "<a href='javascript:nextPage();'>下1页</a>";
}
function nextText() {
	nextSpan.innerHTML = "下1页";
}

function lastLink() {
	lastSpan.innerHTML = "<a href='javascript:lastPage();'>最后1页</a>";
}
function lastText() {
	lastSpan.innerHTML = "最后1页";
}

好好研究这里的代码，就能解决实际的问题。