原生js封装分页器(繁琐版)

最新推荐文章于 2024-05-03 15:43:47 发布

嚭

最新推荐文章于 2024-05-03 15:43:47 发布

阅读量915

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_43585322/article/details/98488394

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页器</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				display: flex;
				list-style: none;
				display: flex;
				justify-content: center;
			}
			li {
				text-align: center;
				border: 1px solid #000;
				padding: 10px;
				width: 150px;
				list-style: none;
				display: inline-block;
			}
			button{
				background-color: #00BFFF;
				padding: 3px 10px;
				border: none;
				color: white;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<ul>
				<li>日期</li>
				<li>ID</li>
				<li>名称</li>
				<li>价格</li>
				<li>数量</li>
			</ul>
			<div id="tab"></div>
		</div>
		<div id="pageEl"></div>
	</body>
	<script src="pagination.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let tab = document.getElementById("tab")
		let page = new Pagination("pageEl",4,"/goods");
		page.bindData(getData)
		function getData(data){
			tab.innerHTML = ""
			data.forEach(i => {
				//创建一个ul
				let oul = document.createElement("ul")
				for(j in i){
					if(j == "dateTime"){
						i[j] = getDates(i[j])
					}
					//追加字符串并截取
					oul.innerHTML += `
						<li>${i[j].toString().slice(-11)}</li>
					`
				}
				//渲染到页面
				tab.appendChild(oul)
			})
		}
		
		//声明一个转换为时间字符串的方法
		function getDates(s){
			let time = new Date(s);
			return `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
		}
	</script>
</html>

pagination.js:

(function(){
	function pagination(el,onePageNum,url){
		this.url = url;
		this.el = document.getElementById(el);
		this.prev = document.createElement("button");
		this.next = document.createElement("button");
		this.pageNumber = document.createElement("div");
		this.go = document.createElement("input"); 
		this.onePageNum = onePageNum;
		this.totalNum = 0;
		this.pageNum = 0;
		this.current = 1;
		
		//开局执行
		this.__init();
	}
	
	pagination.prototype = {
		__init(){
			this.getTotal();
			this.Html();
			this.Css();
			this.Click();
			this.publish();
		},
		getTotal(){
			let xhr =new XMLHttpRequest;
			xhr.open("GET","/goodsTotal",false)
			xhr.onload = () =>{
				if(xhr.status == 200){
					this.totalNum = xhr.responseText
				}
			}
			xhr.send()
			this.pageNum = Math.ceil(this.totalNum/this.onePageNum)
		},
		Html(){
			this.prev.innerHTML = "<";
			this.next.innerHTML = ">";
			for(let i=1;i<=this.pageNum;i++){
				let btn = document.createElement("button");
				btn.innerHTML = i;
				this.pageNumber.appendChild(btn);
			}
			//往元素中追加
			this.el.appendChild(this.prev);
			this.el.appendChild(this.pageNumber);
			this.el.appendChild(this.next);
			this.el.appendChild(this.go);
		},
		Css(){
			this.el.style.display = "flex";
			this.el.style.justifyContent = "center";
			let btn = this.el.getElementsByTagName("button");
			[...btn].forEach(i => {
				i.style.margin = "30px 4px"
				i.style.padding = "3px 10px"
			})
			this.go.style.width = "50px";
			this.go.style.height = "20px";
			this.go.style.margin = "30px 4px"
		},
		//默认第一个的背景颜色
		publish(){
			[...this.pageNumber.children].forEach(i => {
				i.style.backgroundColor = "#00BFFF"
			})
			this.pageNumber.children[this.current-1].style.backgroundColor = "aquamarine";
			if(this.current == 1){
				this.prev.disabled = "disabled";
				this.prev.style.background = "#ccc";
			}else{
				this.prev.disabled = "";
				this.prev.style.background = "#00BFFF";
			}
			if(this.current == this.pageNum){
				this.next.disabled = "disabled";
				this.next.style.background = "#ccc";
			}else{
				this.next.disabled = "";
				this.next.style.background = "#00BFFF";
			}
		},
		//封装一个方法用来判断每次输出的数据条数
		getData(current){
			let xhr =new XMLHttpRequest;
			xhr.open("GET",this.url + "?cur=" + current + "&onepage=" + this.onePageNum,false)
			xhr.onload = () =>{
				if(xhr.status == 200){
					let data = JSON.parse(xhr.responseText);
					this.fn(data)
				}
			}
			xhr.send()
		},
		bindData(fn){
			this.fn = fn;
			this.getData()
		},
		Click(){
			[...this.pageNumber.children].forEach((i,index,def) => {
				i.onclick = () => {
					this.current = i.innerHTML;
					this.publish();
					this.getData(this.current)
				}
			})
			this.prev.onclick = () => {
				this.current --
				this.publish();
				this.getData(this.current)
			};
			this.next.onclick = () => {
				this.current ++;
				this.publish();
				this.getData(this.current)
			};
			let that = this;
			this.go.onkeydown = function(e){
				if(e.keyCode == 13){
					that.current = this.value
					if(isNaN(this.value)){
						this.value = "";
						return;
					}
					if(this.value < 1){
						that.current = 1;
					}
					if(this.value > that.pageNum){
						that.current = +that.pageNum;
					}
					that.publish();
					that.getData(+that.current);
					this.value = "";
				}
			}
		}
	}
	
	window.Pagination = pagination;
}())

server.js:

//连接第三方库
let Koa = require("koa");
let Static = require("koa-static");
let body = require("koa-body");
let Router = require("koa-router")
let {goods} = require("./mongo.js")
//实例化
let server = new Koa()//服务器对象
//监听
server.listen(8030,err => {
	console.log("8030")
})
//先处理静态资源
server.use(Static("./src"))

//处理post请求中发来的数据
server.use(body())//可以任意使用ctx.request.body

//前端发送请求
//对应一个借口接收前端的请求
//创建路由器
//实例化一个具体的路由对象
let router = new Router()
//写接口
router.get("/goodsTotal",async (ctx,next) => {
	ctx.body = await goods.countDocuments();
})
router.get("/goods",async (ctx,next) => {
	let onePage = ctx.query.onepage;
	let cur =  ctx.query.cur;
	ctx.body = await goods.find({},{id:0,brand:0,info:0,__v:0}).skip(onePage*(cur-1)).limit(+onePage);
})
//把路由挂载到server上
server.use(router.routes())```

嚭

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js封装分页器(繁琐版)

html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>分页器</title> <style type="text/css"> * { margin: 0; padding: 0; } ul ...
复制链接

扫一扫