纯JavaScript实现的前端分页代码

最新推荐文章于 2021-09-28 17:03:59 发布
最新推荐文章于 2021-09-28 17:03:59 发布
阅读量306 收藏 1
点赞数
文章标签： javascript 前端 python ViewUI
原文链接：https://my.oschina.net/feanlau/blog/885376
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

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

转载于:https://my.oschina.net/feanlau/blog/885376

weixin_33933118
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在获取全部数据后通过js纯前端实现分页效果
bug处理进行时
12-05 9435
之前一直使用前后端配合的方式实现分页效果，即在后台将数据进行分页处理，前端向后端发送页数参数，单独的请求某一页的数据。目前在数据量不是很大的基础上要实现js纯前端分页，找了几个插件没有很好的解决方案，最后参照网络博客使用js实现。说明：在调研过程中参考了一位大神的博客，但是忘记了博客链接，部分代码直接来自于该博客。
使用JS实现纯分页原理以及实现
廖子默
10-13 2895
写在前面 好久没写博客了，因为实习工作好忙，还要同时兼顾毕业设计，最主要的是我现在是前端实习，哈哈，我一个在大学学了这么久后端开发的人，结果人生第一份正式的实习工作是前端。现在做了一个月了，自学了很多的前端知识，也对前端有了更多的了解，发现以前的认知都是错误的，什么前端简单，谁再说这句话我会认为他是一个ZZ。还有最后就是其实作为一个软件开发的人，技术栈一定要广，然后才深入几个。 不说废话了—实...
js分页实现，前端实现。
热门推荐
liuzijiang1123的专栏
01-05 4万+
主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格 的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt
前端 JS 分页功能的实现
weixin_43501588的博客
03-06 372
page.js文件内容 function buildPagination(pageNo, pageSize, total){ if(total <= 0){ return; } var maxPage = parseInt(total / pageSize); if((total % pageSize) > 0){ max...
纯JS前端实现分页代码
11-25
在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面将详细解释实现这个功能的关键步骤和涉及的技术。 1. **HTML结构**： 分页组件通常包含“首页”、“上一页”、...
vue实现前端分页完整代码
10-15
在这个问题中，我们讨论的是如何在Vue应用中实现前端分页功能。前端分页意味着在客户端处理分页逻辑，而不是在服务器端。这通常适用于数据量较小或实时更新需求不高的场景。 首先，让我们分析给出的代码片段。这个...
javascript实现前端分页效果
01-19
本文实例为大家分享了javascript实现前端分页效果的具体代码，供大家参考，具体内容如下 需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。 效果图： 当页数是第一页的时候，首页和向前那个按钮处于...
javascript实现前端分页功能
01-22
直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>分页</title>...
html js实现分页代码,js前端分页实现
weixin_35779220的博客
06-09 449
最近做的一个项目，整个页面的数据更新要纯ajax实现，没办法，连分页都得由我来写了，基本思路还是像后台那样实现分页，后台实现分页其实也就是用后台的程序来处理那段分页的模版，于是我想下面是分页的模版：1.[代码][JavaScript]代码http://www.cnblogs.com/hust/archive/2011/06/25/2090465.html{{if(data.totalpage&gt...
PaginatorJS:简单的分页器模板
06-21
分页器JS 这应该像 Will Paginate Ruby gem 一样工作，但有更多的助手和 JS。 您可以使用示例模板或使用辅助函数构建您自己的模板。
JS实现前端动态分页码代码实例
10-15
主要介绍了JS实现前端动态分页码代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js分页组件Pagination
weixin_45946494的博客
06-15 2237
js分页组件Pagination 文章目录js分页组件Pagination1. 使用配置2. 使用实例3. js源码4. css样式 仿造element-ui使用纯js制作的分页组件，不依赖其他库，可复制粘贴使用，源码仓库地址 1. 使用配置 interface PaginationConfig { // 父容器元素或者选择器 pNode: String | HTMLElement, // 页数 pageSize: Number, // 当前页 pageNum: Number,
前端js分页功能的实现，非常实用，新手必看
weixin_30724853的博客
06-24 5140
分享一个前端拿到数据后，自己生成分页的案例，案例如图显示，点击搜索后查询数据，显示数据列表，前端根据数据显示正确的分页 附上代码：代码附上,简单粗暴，自己用过的，兼容性好，没有封装，可以很好的分页原理，希望可以帮助到大家 html排版如下： <!--搜索列表--><div class="search"> <div class="co...
js简单分页，只有上一页和下一页
zifengye520的专栏
01-12 1万+
/*制作分页 *参数分别为，目标位置id，数据总数，当前页，每页显示条数，回调函数(即，点击分页按钮触发的方法) *其中class为pagebar_1和pagebar_2的区别是能上一页和下一页能否点击，以及颜色变化 */ function getPageBar(targetId,total,currPage,rows,func){ var totalPage=Math.ceil(total
html js实现分页代码,JS实现前端动态分页码代码实例
weixin_31119637的博客
06-09 659
思路分析：有3种情况第一种情况，当前页面curPage < 4第二种情况，当前页面curPage == 4第三种情况，当前页面curPage>4此外，还要考虑，当前页码 curPage < pageTotal(总页码)-2，才显示 ...首先，先是前端的布局样式/*首先，在body中添加div id="pagination" */其次，是css代码*{margin: 0;padd...
vue前端分页代码实现
qq_41921378的博客
09-28 254
Html： <div class="pageNum"> <button @click="firstPage">首页</button> <button @click="backPage">上一页</button> <ul> <li :class="{active:page===currentPage}" v-for="page in totalPage" @click="toPage(pag
前端分页实现（二）
qq_36803558的博客
07-27 882
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;分页&lt;/title&gt; &lt;script type="text/javascript" src
javascript实现前端分页功能.docx
01-13
本文档详细介绍了如何使用JavaScript实现前端分页功能。在前端开发中，分页是一种常见的需求，尤其是在处理大量数据展示时，以提高用户体验。通过这个文档，开发者可以学习到如何结合HTML、CSS和JavaScript来构建一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值