文档章节

纯JavaScript实现的前端分页代码

FeanLau
 FeanLau
发布于 2017/04/23 09:02
字数 1279
阅读 142
收藏 2

最近我遇到问题,就是控制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页";
}

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

© 著作权归作者所有

共有 人打赏支持
FeanLau
粉丝 3
博文 219
码字总数 117077
作品 0
浦东
程序员
手把手教你用原生JavaScript造轮子(1)——分页器

日常工作中经常会发现有大量业务逻辑是重复的,而用别人的插件也不能完美解决一些定制化的需求,所以我决定把一些常用的组件抽离、封装出来,形成一套自己的插件库。同时,我将用这个教程系列...

csdoker
07/26
0
0
jquery.pagination.js分页

jquery.pagination.js分页 序言 这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。 友情提示下:我有...

charley158
2014/01/06
0
0
Web后端工程师应该拥抱前端了

前言 大数据部发展到一定的阶段,无论是内部体系的完善,还是服务能力对外的暴露,对web端交互能力都有极大的需求,所以对web研发的诉求其实也是非常大的。 现在不少web后端工程师还是基于传...

祝威廉
07/05
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
从JS对象开始,谈一谈“不可变数据”和函数式编程

文章转载自:https://segmentfault.com/a/1190000008780076 作为前端开发者,你会感受到JS中对象(Object)这个概念的强大。我们说“JS中一切皆对象”。最核心的特性,例如从String,到数组,再...

朱先忠老师
05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部