原生js分页实现

最新推荐文章于 2023-06-26 15:39:28 发布
最新推荐文章于 2023-06-26 15:39:28 发布
阅读量252 收藏 6
点赞数 3
分类专栏： 技术 分页 js分页 文章标签： javascript html5 html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44255794/article/details/108708529
版权
技术 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
分页
1 篇文章 0 订阅
订阅专栏
js分页
1 篇文章 0 订阅
订阅专栏

1.链接：https://www.jq22.com/jquery-info23387#
https://github.com/cjichao/paging.git
2.先看下用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='test'></div>
		<script type="text/javascript">
			var nums = 150, // 总数，数据的条数
				counts = 10; // 每页个数，每页数据条数
			var p = new Page({
				el: '#test',//dom容器
				nums: nums,
				counts: counts,
				defaultPage: 1,// 默认第几页
				showHeadFoot: !false, // 显示首页尾页
				jumpToOrder: true, // 跳转到指定页
				showNowAndAll: true, // 当前页/共几页
				clickEvent: function(currectPage) {
					console.log('点击'+currectPage+'页');
				}
			});
		</script>
	</body>
</html>

效果：
在这里插入图片描述
3.js代码

function Page(options) {
		options = options || {};
		this.el = options.el;
		this.nums = options.nums; //数据总条数
		this.counts = options.counts || 10; //每页数据条数
		this.parent = document.querySelector(this.el);
		this.parent.classList.add('page-elem-field-root');
		this.parentNode = document.createElement('div');
		this.parent.appendChild(this.parentNode);
		this.defaultPage = Number(options.defaultPage) || 1;
		this.last = this.nums % this.counts;
		this.pages = parseInt(this.nums / this.counts);
		this.jumpToOrder = !!options.jumpToOrder; // 是否显示跳转到指定页
		this.showNowAndAll = !!options.showNowAndAll; // 显示当前第几页，共几页
		this.showHeadFoot = !!options.showHeadFoot;
		this.head = options.head || '首页';
		this.foot = options.foot || '尾页';

		this.prev = '«';
		this.next = '»';

		this.headfoot = [];
		if (this.last != 0) {
			this.pages++;
		}
		this.div = options.div || 'div';
		this.domList = [];
		this.showDomList = [];
		var that = this;

		function noop() {
			if (options.clickEvent && typeof options.clickEvent == 'function') {
				options.clickEvent(that.currect);
			}
		}
		this.clickEvent = noop;
		this.init();
	}

	Page.prototype = {
		init: function() {
			this.createDom();
			this.showDom();
			// 监听当前页的数字变化
			this.watcherCurrect();
			this.addDom();
			this.reanderHeadFoot();
			this.jumpToOrderPage();
			this.showNowAndAllPage();
		},
		showNowAndAllPage: function() {
			if (this.showNowAndAll) {
				var pagesbox = document.createElement('div');
				var allPages = document.createElement('div');
				var currectPage = document.createElement('div');
				var line = document.createElement('div');
				pagesbox.classList.add('pagesbox');
				allPages.classList.add('allPages');
				currectPage.classList.add('currectPage');
				line.classList.add('line');
				currectPage.innerText = this.currect;
				allPages.innerText = this.pages;
				line.innerText = '/';
				pagesbox.appendChild(currectPage);
				pagesbox.appendChild(line);
				pagesbox.appendChild(allPages);
				this.parent.appendChild(pagesbox);
				this.showNowAndAllPageDom = {
					pagesbox: pagesbox,
					allPages: allPages,
					currectPage: currectPage,
					line: line
				};
			}
		},
		jumpToOrderPage: function() {
			if (this.jumpToOrder) {
				var toPage = document.createElement('div');
				var inputBox = document.createElement('div');
				var input = document.createElement('input');
				toPage.classList.add('toPage');
				inputBox.classList.add('inputBox');
				input.classList.add('inputborder');
				input.type = 'text';
				input.value = this.currect;
				this.addEventForInput(input);
				inputBox.appendChild(input);
				toPage.appendChild(inputBox);
				this.parent.appendChild(toPage);
				this.jumpToOrderPageDom = {
					toPage: toPage,
					input: input,
					inputBox: inputBox
				};
			}
		},
		addEventForInput: function(input, showInputVal) {
			var that = this;
			input.addEventListener('change', function(e) {
				var value = e.target.value;
				if (value > that.pages) {
					value = that.pages;
				} else if (value < 1) {
					value = 1;
				}
				that.currect = value;
				this.value = value;
			})
		},
		updateCurrectAndOrderBox: function(val) {
			if (this.jumpToOrder) {
				this.jumpToOrderPageDom.input.value = val;
			}
			if (this.showNowAndAll) {
				this.showNowAndAllPageDom.currectPage.innerText = val;
			}
		},
		reanderHeadFoot: function() {
			if (!this.showHeadFoot) {
				return;
			}
			var div = this.div;
			var head = document.createElement(div);
			var foot = document.createElement(div);
			head.innerHTML = this.head;
			head.classList.add('item');
			head.classList.add('head');
			foot.innerHTML = this.foot;
			foot.classList.add('item');
			foot.classList.add('foot');
			this.headfoot.push(head);
			this.headfoot.push(foot);
			this.parentNode.insertBefore(head, this.parentNode.firstChild);
			this.parentNode.appendChild(foot);
			this.addEventHeadFoot();
			this.headFootDisable();
		},
		headFootDisable: function() {
			if (this.currect === 1) {
				this.headfoot[0].classList.add('item-disable');
			}
			if (this.currect === this.pages) {
				this.headfoot[1].classList.add('item-disable');
			}
		},
		addEventHeadFoot: function() {
			var that = this;
			this.headfoot[0].addEventListener('click', function() {
				if (that.currect != 1) {
					that.currect = 1;
				}
			});
			this.headfoot[1].addEventListener('click', function() {
				if (that.currect != that.pages) {
					that.currect = that.pages;
				}
			});
		},
		createDom: function() {
			var div = this.div;
			var domList = this.domList;
			var prev = document.createElement(div);
			var next = document.createElement(div);
			prev.innerHTML = this.prev;
			prev.classList.add('item');
			next.innerHTML = this.next;
			next.classList.add('item');
			domList[0] = prev;
			var pages = this.pages;
			for (var i = 0; i < pages; i++) {
				var item = document.createElement(div);
				item.classList.add('item');
				item.innerHTML = i + 1;
				domList[i + 1] = item;
			}
			domList.push(next);
			return domList;
		},
		showDom: function() {
			var domList = this.domList;
			var len = domList.length;
			var list = this.showDomList;
			var defaultPage = this.defaultPage;
			if (len <= 12) {
				for (var i = 0; i < len; i++) {
					list[i] = domList[i];
				}
			} else {
				var offset = defaultPage - 6 < 0 ? 0 : defaultPage - 6;
				var cha = this.pages - defaultPage;
				if (cha < 5) {
					offset = this.pages - 10;
				}
				list[0] = domList[0];
				for (var i = 1; i < 11; i++) {
					list[i] = domList[i + offset];
				}
				list[i] = domList[len - 1];
			}
			return list;
		},
		addDom: function() {
			this.parentNode.classList.add('page-elem-field');
			this.addAndRemoveClass();
			this.addEvent();
			var fgDom = document.createDocumentFragment();
			var showDomList = this.showDomList;
			var len = showDomList.length;
			for (var i = 0; i < len; i++) {
				fgDom.appendChild(showDomList[i]);
			}
			this.parentNode.appendChild(fgDom);
		},
		addEvent: function() {
			var domList = this.domList;
			var len = domList.length;
			for (var i = 0; i < len; i++) {
				domList[i].addEventListener('click', this.jump.bind(domList[i], this));
			}
		},
		jump: function jump(p) {
			var thispage = this.innerHTML;
			if ((thispage == p.prev && p.currect == 1) ||
				(thispage == p.next && p.currect == p.pages) ||
				(thispage == p.currect)) {
				return;
			}
			if (thispage == p.prev && p.currect > 1) {
				p.currect--;
			} else if (thispage == p.next && p.currect < p.pages) {
				p.currect++;
			} else if (thispage != p.prev && thispage != p.next) {
				p.currect = Number(thispage);
			}
		},
		addAndRemoveClass: function() {
			var domList = this.domList;
			if (this.currect === 1) {
				domList[0].classList.add('item-disable');
			}
			if (this.currect === this.pages) {
				domList[domList.length - 1].classList.add('item-disable');
			}
			domList[this.currect].classList.add('active');
		},
		activeCurrectItem: function(val) {
			var domList = this.domList;
			domList[val].classList.add('active');
			domList[0].classList.remove('item-disable');
			domList[domList.length - 1].classList.remove('item-disable');
			if (this.showHeadFoot) {
				this.headfoot[0].classList.remove('item-disable');
				this.headfoot[1].classList.remove('item-disable');
			}
			if (val == 1) {
				// 第一页就显示禁止的图标
				domList[0].classList.add('item-disable');
				if (this.showHeadFoot) {
					this.headfoot[0].classList.add('item-disable');
				}
			} 
			if (val == this.pages) {
				// 最后一页就显示禁止的图标
				domList[domList.length - 1].classList.add('item-disable');
				if (this.showHeadFoot) {
					this.headfoot[1].classList.add('item-disable');
				}
			}
		},
		moveDom: function(val, oneDomNumber) {
			var domList = this.domList;
			var showDomList = this.showDomList;
			var cha = val - oneDomNumber;
			var moves = 0;
			if (cha > 5) {
				moves = cha - 5; //首部移除几个
				// 最后一个元素后面还有几个元素
				var showlastnum = Number(showDomList[showDomList.length - 2].innerHTML);
				var afters = this.pages - showlastnum;
				// console.log(afters, moves)
				if (afters > 0 && moves > 0) {
					// 需要移动的dom数量，并且是存在这么多数量
					var howmany = Math.min(afters, moves);
					for (var i = 0; i < howmany; i++) {
						showDomList.splice(showDomList.length - 1, 0, domList[showlastnum + i + 1]);
						this.parentNode.insertBefore(domList[showlastnum + i + 1], showDomList[showDomList.length - 1]);
						this.parentNode.removeChild(showDomList[i + 1]);
					}
					showDomList.splice(1, howmany);
				}
			}
			if (cha <= 5 && oneDomNumber != 1) {
				if (val <= 5) {
					moves = oneDomNumber - 1;
				} else {
					moves = 5 - cha;
				}
				// 移动几个dom
				var howmany = moves;
				for (var i = 0; i < howmany; i++) {
					this.parentNode.insertBefore(domList[oneDomNumber - i - 1], showDomList[1]);
					this.parentNode.removeChild(showDomList[showDomList.length - 2 - i]);
					showDomList.splice(1, 0, domList[oneDomNumber - i - 1]);
				}
				showDomList.splice(showDomList.length - 1 - howmany, howmany);
				// console.log('往前移动' + moves);
			}
			oneDomNumber = Number(showDomList[1].innerHTML);
			return oneDomNumber;
		},
		watcherCurrect: function() {
			var val = this.defaultPage;
			var domList = this.domList;
			var showDomList = this.showDomList;
			var oneDomNumber = Number(showDomList[1].innerHTML);
			Object.defineProperty(this, 'currect', {
				enumerable: true,
				configrable: false,
				set: function(v) {
					domList[val].classList.remove('active');
					val = v;
					// 更新输入框中的值，当前第几页的值
					this.updateCurrectAndOrderBox(val);
					// 更新pages的dom，不变的保留，改变的添加和删除，没有直接更新覆盖，重用了相同的dom
					oneDomNumber = this.moveDom(val, oneDomNumber);
					// 当前选择页激活
					this.activeCurrectItem(val);
					// 执行用户自定义事件
					this.clickEvent(val);
				},
				get: function() {
					return val;
				}
			})
		}
	}

4.css（自己修改）

.page-elem-field-root {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.page-elem-field {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.page-elem-field .item {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 16px;
	border: 1px solid #e2e2e2;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.page-elem-field .item.head {
	width: 60px;
	min-width: 50px;
}

.page-elem-field .item.foot {
	width: 60px;
	min-width: 50px;
}

.page-elem-field .item.active {
	background-color: #1e9fff;
	color: #fff;
}

.page-elem-field .item:hover {
	background-color: pink;
	color: #fff;
}

.page-elem-field .item.item-disable {
	color: #d2d2d2 !important;
	cursor: not-allowed !important;
}

.page-elem-field .item.active:hover {
	background-color: #1e9fff;
	color: #fff;
}

.toPage {
	margin-left: 10px;
	width: 100px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.toPage .inputBox {
	width: 40px;
	height: 30px;
	box-sizing: border-box;
	position: relative;
}

.toPage .inputBox .inputborder {
	width: 40px;
	height: 30px;
	box-sizing: border-box;
	text-align: center;
	outline: none;
	border: 1px solid #e2e2e2;
	z-index: 22;
	position: absolute;
	left: 0;
	top: 0;
}

.toPage .inputBox .show-val {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #e2e2e2;
	box-sizing: border-box;
}

.toPage::before {
	content: '前往';
	display: block;
	margin-right: 5px;
	width: 32px;
	height: 30px;
	line-height: 30px;
}

.toPage::after {
	content: '页';
	margin-left: 5px;
	width: 16px;
	height: 30px;
	line-height: 30px;
}

.pagesbox {
	margin-left: 10px;
	width: 60px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.pagesbox .currectPage {
	color: deepskyblue;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.pagesbox .line {
	color: deepskyblue;
	width: 10px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

.pagesbox .allPages {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
稳不住了，他们能赢
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现分页效果
10-14
主要为大家详细介绍了原生js实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js原生分页
qq_45188807的博客
07-28 178
js原生简单分页
原生JS分页
qq_34233337的博客
11-03 1291
原生JS分页首先我们先捋顺一下分页的思路代码开始先上一下最终的效果图首先写html，写一个table用来显示数据，一个ul用于分页，图：css：动态改变共多少页，第几页页码标签改变效果动态改变当前页码效果上下翻页首页、尾页 首先我们先捋顺一下分页的思路 目的：为了在客户端能更快更好的渲染呈现，让页面的数据看起来整洁、不臃肿、不造成页面过度的宽度长度，为了降低服务器内存的负载，加快系统运行速度。 在...
JS简单原生分页
weixin_44053796的博客
06-27 264
html部分随便写即可 不同需求写不同样式 html <div class="container main clear"> <ul> </ul> </div> <div class="container odd"> </div> 这里简单些一个ul标签用来写入内容 odd呢代表我们分页要写入的a标签页数 这里后台我用到了node来书写，不过原理是相通的，用其他后端语言也是可以实现的。 node const express=require
原生JavaScript实现分页
Packager
12-31 537
原生JavaScript实现分页 近期比较忙，没有过多更新，在这里祝大家在即将来临的2019一切都好，少写bug 一、接口测试数据 { &quot;status&quot;: &quot;success&quot;, &quot;res_code&quot;: &quot;1&quot;, &quot;totalPages&quot;: 35, &quot;curren
原生javascript实现分页效果
12-03
总的来说，这个原生JavaScript分页实现通过构造函数和原型链提供了分页功能，包括页码的生成和事件处理。尽管它相对简单，但对于理解JavaScript如何处理页面交互和DOM操作是非常有价值的。在实际项目中，你可能需要...
原生js + css实现分页
11-22
总的来说，使用原生JS和CSS实现分页虽然相比使用预封装的库更繁琐，但能提供更高的定制性，并有助于提升开发者对Web基础技术的理解。通过结合HTML布局、CSS样式和JavaScript逻辑，我们可以构建出符合项目需求的高效...
【JS案例】分页器——使用原生JavaScript实现
m0_50785976的博客
07-14 4992
原生js实现分页器功能
原生js实现分页
jdrunk的博客
04-12 1962
原生javascript分页 html分页与ajax数据请求结合使用 前端js分页 1. page.css .pagination { padding:5px; font-family: '微软雅黑',Arial,Verdana,arial,serif; } .pagination ul { list-style: none; padding-left: 0; font-size: 0; } .pagination ul li { padding: 0 10px;
原生js实现分页功能
SugarXiXixi的博客
10-08 2444
原生js分页 实现效果 一、函数封装分页 传入两个参数。第一个为要显示第几页，第二个是页面显示多少数据， Js动态操作dom插入 分页按钮 条件结构判断 是否为按钮绑定点击事件 二、使用步骤 1.html+css 代码如下（示例）： <style> #idData{color:red;border:solid;text-align:center;} a{text-decoration:none;} </styl...
JS做的原生分页
08-17
JS做的原生分页
原生JS实现分页效果
越陌度阡
07-18 3004
做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢？接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........
原生js分页
最新发布
qq_35469137的博客
06-26 616
项目中要对数据进行分页处理 一般分页我们都用插件 比如elementui bootstrap之类的 但其实原生的我们也应该理解思路 理解思路有点代码功底自己也能调试出来。我们首先需要知道一共有多少条数据（分多少页，接口请求来的总数据条数。可以先请求一次接口，拿到总条数） 一页多少条数据 （后端给的参数）最近工作好忙 工作中也遇到了很多问题 也很久没有更新博客了 闲下来继续更新吧 大家一块学习。
用原生js手写分页功能
qq_52607834的博客
03-04 1438
分页功能如下：首先，要显示的数据如下： html结构如下： 我们可以定义当前页数为pageNum，总页数为maxPage，每页显示的数据为limit条。 当前显示数据索引受pageNum和limit影响。如果是第一页，即pageNum为1时，则显示数据所对应的索引为04；第二页，pageNum为2时，为59；第三页，pageNum为3时，为10~14。用变量来表示为：(pageNum-1)limit ~ pageNumlimit所以，我们书写一个更新页面的函数，并在一开始的时候就调用该函数进行初始化页面。
原生js分页功能
szl199107101035的博客
07-31 820
js的分页 ul{list-style: none;} #con li{ width:200px; height:30px; text-align:center; font-family: 'Microsoft Yahei'; font-size:16px; margin:0 auto; border:1px solid #ddd; } #pageEnd,#con{ w
原生JS实现分页
weixin_55869886的博客
04-05 104
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页原理</title> <style type="text/css"> *{ margin: 0; padding: 0; } input{ width: 50px; } .page{ width: 100%;
原生 javascript 实现 分页条
岛泪的博客
10-19 487
黑色方框只是为了更好地演示而加上去的。 该分页条最大的特点就是即可以把分页条的高度和宽度条设成固定的高度和宽度，也可设置成随父元素的高度和宽度。当把分页条的宽度设置成随父元素的宽度时，只要父元素的宽度是可以随屏幕变化，则分页条的宽度也可以随屏幕变化，这样分页条就可以实现自适应屏幕宽度了。 <!DOCTYPE html> <html lang="zh...
原生javascript分页
Buddha_ITXiong的博客
05-11 602
这是一个用原生js实现的分页插件，有兴趣的可以看看函数封装的思想，借鉴一下思维效果图：html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;分页插件&lt;/title&gt; &lt;/head&gt; &lt;s
java 原生分页
czz_java的博客
11-20 318
public class PageServlet extends HttpServlet{ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String dang1 = req.getParamet
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值