文档章节

纯JavaScript实现的前端分页代码

FeanLau
 FeanLau
发布于 2017/04/23 09:02
字数 1279
阅读 140
收藏 2
点赞 0
评论 0

最近我遇到问题,就是控制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
码字总数 130409
作品 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
推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

李朝强
2013/07/29
0
1
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
05/27
0
0
url2sql原始想法及参考实现

首先YY一种前景,浏览器登录帐号,显示是一个简洁的IDE,编写保存刷新OK,网站完成。 在这样的一个设想中,在线编辑器(前端部分,如)的实现应该不是大的问题,后端涉及业务逻辑保存数据诸多...

高雷
2013/01/22
0
9
React Native 从入门到原理

React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几。 本文分为两个部分:上半部分用通俗的语...

guozhendan
06/26
0
0
数据库分页查询和跨页选中行问题处理

今天看到一篇博客,突然想到以前遇到的一个类似的问题,关于分页查询和跨页保持选中行的问题,下面给出答案,一起探讨下吧。 一、什么是数据库分页查询? 即在服务端分页,跳到第n页才查询、...

海岸线的曙光
07/03
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
17分钟前
8
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
18分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
21分钟前
1
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
26分钟前
1
0
《射雕英雄传》书摘

1. 我虽是个飘泊江湖的贫家女子,可不是低三下四、不知自爱之人。你如真心爱我,须当敬我重我。我此生决无别念,就是钢刀架颈,也决意跟定了你。将来……将来如有洞房花烛之日,自然……自能...

k91191
37分钟前
0
0
解决:modal中datePicker 选中时,会触发modal的hidden.bs.modal事件

最近项目中发现了一个bug,具体表现为选中模态框上datepicker组件上的日期时,会触发模态框的关闭事件,导致数据编辑无法正常进行。网上搜索了下,解决方法如下: $('.datepicker').on('hid...

Funcy1122
40分钟前
0
0
Redis分布式锁的正确实现方式

前言 分布式锁一般有三种实现方式: 1.数据库乐观锁 2.基于Redis的分布式锁; 3.基于Zookeeper的分布式锁。本篇博客将介绍第二种方式,基于Redis实现分布式锁。虽然网上已经有各种介绍Redis...

大海201506
今天
1
0
ClassNotFoundException: javax.el.ELManager

这个是因为tomcat7中的el-api2.2,有些版本太低,建议升级tomcat到8.0,利用el-api3.0就会解决这个问题。

无语年华
今天
0
0
Jvm堆内存的划分结构和优化,垃圾回收详解(详细解答篇)

在JVM中堆空间划分如下图所示 上图中,刻画了Java程序运行时的堆空间,可以简述成如下2条 1.JVM中堆空间可以分成三个大区,新生代、老年代、永久代 2.新生代可以划分为三个区,Eden区,两个幸...

嘻哈开发者
今天
1
0
CentOS 7.4 设置系统字符编码

1.语言变量LANG在 /etc/locale 文件中。 2.可以通过/ect/profile 来修改LC_TYPE 变量的值 添加如下代码 export LC_ALL="zh_CN.GBK" export LANG="zh_CN.GBK" 到profile文件中,变量的可以修改...

qimh
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部