自定义分页组件实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36787131/article/details/103959111

效果图：
在这里插入图片描述

html部分：

<head>
	  <meta charset="utf-8"/>
	  <title>page</title>
	  <link rel="stylesheet" href="css/base.css"/>
	  <link rel="stylesheet" href="css/style.css"/>
	  <link rel="stylesheet" href="css/page.css"/>
	  <style>
		.box {
			width: 600px;
			padding-top: 20px;
			padding-bottom: 20px;
			border: 1px solid #e4e4e4;
			margin: 50px auto;
			background-color: #fff;
			display:flex;
			justify-content: center;
		}
	  </style>
</head>
<body>
	<div class="box" id="box"></div>
	<script src="js/Page.js"></script>
	<script>
		window.onload = function() {
			var box = document.getElementById("box");
			new Page({ele:box , totalPage:999999999999999 , fn:fn});
		}
		
		function fn(page) {
			console.log(page);
		}
	</script>
</body>

JS部分：
function Page(config) {
this.ele = config.ele; //父盒子
this.fn = config.fn; //回调函数
this.isBorder = config.isBorder;
this.length = config.length; //页码长度
this.totalPage = config.totalPage; //总页码
this.currentPage = config.currentPage; //当前页码
this.className = “”;

if(this.isBorder == undefined || this.isBorder) {
	this.className = "wsp-border ";
} 

if(this.totalPage == undefined) {
	this.totalPage = 1;
}

if(this.currentPage == undefined) {
	this.currentPage = 1;
}

if(this.length == undefined) {
	this.length = 10;
}

this.callback(this.currentPage);

this.init();

}

Page.prototype.init = function() {
this.ele.innerHTML = “”;

var page = document.createElement("div");
page.className = "wsp-page";
this.ele.appendChild(page);

var p = this;
if(this.currentPage > 1) {
	var home = document.createElement("i");
	home.innerText = "首页";
	home.className = this.className + "wsp-home";
	page.appendChild(home);
	home.addEventListener("click" , function() {
		p.currentPage = 1;
		p.callback(p.currentPage);
		p.init();
	});
	
	var front = document.createElement("i");
	front.className = this.className + "wsp-front icon-left";
	page.appendChild(front);
	front.addEventListener("click" , function() {
		p.currentPage -= 1;
		p.callback(p.currentPage);
		p.init();
	});
}


var startPage = this.currentPage % this.length > 0 ? Math.floor(this.currentPage / this.length) * this.length + 1 : this.currentPage - this.length + 1;	//开始
var endPage = startPage + this.length - 1;	//结束
endPage = endPage < this.totalPage ? endPage : this.totalPage;
for(var i = startPage ; i <= endPage ; i++) {
	var num = document.createElement("i");
	num.innerText = i;
	num.className = this.currentPage != i ? this.className + "wsp-num" : "wps-num wsp-current";
	page.appendChild(num);
	(function(i , num) {
		if(i != p.currentPage) {
			num.addEventListener("click" , function() {
				p.currentPage = i;
				p.callback(p.currentPage);
				p.init();
			});
		}
	})(i , num);
}


if(this.currentPage < this.totalPage) {
	var after = document.createElement("i");
	after.className = this.className + "wsp-after icon-right";
	page.appendChild(after);
	after.addEventListener("click" , function() {
		p.currentPage += 1;
		p.callback(p.currentPage);
		p.init();
	});
	
	var tail = document.createElement("i");
	tail.innerText = "尾页";
	tail.className = this.className + "wps-tail";
	page.appendChild(tail);
	tail.addEventListener("click" , function() {
		p.currentPage = p.totalPage;
		p.callback(p.currentPage);
		p.init();
	});
}

}

Page.prototype.callback = function(currentPage) {
if(this.fn != undefined) {
this.fn(currentPage);
}
}

Page.prototype.setLength = function(length) {
this.length = length;
}

Page.prototype.setTotalPage = function(totalPage) {
this.totalPage = totalPage;
}

Page.prototype.setCurrentPage = function(currentPage) {
this.currentPage = currentPage;
}

CSS部分：
.wsp-page {
overflow:hidden;
}

.wsp-page > i {
height: 28px;
padding-left: 8px;
padding-right: 8px;
font-size: 16px;
color: #666666;
box-sizing: border-box;
margin: 2px 2px;
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
float: left;
}

.wsp-page > .wsp-border {
border: 1px solid #e4e4e4;
}

.wsp-page > .wsp-border:not(.wsp-current):hover {
background-color: #f2f2f2;
/* color: red;
border: 1px solid red; */
}

.wsp-page > .wsp-not-border:not(.wsp-current):hover {
font-size: 18px;
}

.wsp-page > .wsp-home ,
.wsp-page > .wsp-front ,
.wsp-page > .wsp-after ,
.wsp-page > .wsp-tail {
padding-left: 5px;
padding-right: 5px;
}

.wsp-page > .wsp-current {
border: 0px;
color: red;
cursor: auto;
}