文档章节

纯JavaScript实现的前端分页代码

FeanLau
 FeanLau
发布于 2017/04/23 09:02
字数 1279
阅读 156
收藏 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
浦东
程序员
私信 提问
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
对Javascript框架开发补充

SimpleFramework是基于服务器端Java技术实现的,并提供了完整的Web应用开发解决方案,包括前端的ui与后台的dao 处理。 Javascript是SimpleFramework的一项重要支撑技术,但Javascript难于调试...

simplesns
2010/12/03
335
2
手把手教你用原生JavaScript造轮子(1)——分页器

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

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

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

charley158
2014/01/06
0
0
推荐十款来自极客标签的超棒前端特效[第十一期]

来源:GBin1.com 本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更好的帮助和不同以往...

gbin1
2013/08/13
6
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
20分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0
flutter 底部输入框 聊天输入框 Flexible

想在页面底部放个输入框,结果键盘一直遮住了,原来是布局问题 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("评论"), ...

大灰狼wow
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部