原生JS实现分页

最新推荐文章于 2024-07-01 11:34:43 发布

为什么选b

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量106

点赞数

分类专栏：方法封装文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_55869886/article/details/115360885

版权

方法封装专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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%;
				height: 40px;
				line-height: 20px;
				background-color: aqua;
				position: fixed;
				bottom: 0px;
				display: flex;
				justify-content: space-between;
			}
			ul>li{
				width: 20px;
				height: 20px;
				float: left;
				list-style: none;
				border:  solid 1px black;
				margin: 1px;
			}
		</style>
	</head>
	<body>
		<div class="list">
			
		</div>
		<div class="page">
			<span>每页<input type="number" value="10">条</span>
			
			<ul>
				
			</ul>
		</div>
	</body>
</html>
<script src="./page.js"></script>

{
	var list = document.querySelector(".list")
	var page = document.querySelector(".page")
	var ipt = document.querySelector("input")
	var ul = document.querySelector("ul")
	
	var total = 100
	var pagenum = 1
	var pagesize =10
	
	var ol = document.createElement("ol")
	list.appendChild(ol)
	var arr = []
	var newArr = []
	
	for(var i=0;i<total;i++){
		arr.push("第"+(i+1)+"条数据")
	}
	
	
	
	
	ul.addEventListener("click",function(e){
		pagenum = e.target.innerText
		ol.innerHTML = ""
		newArr = arr.slice((pagenum-1)*pagesize,pagenum*pagesize)
		olAddlI()
	})
	
	ipt.onchange = function (){
		ol.innerHTML = ""
		ul.innerHTML = ""
		pagesize = ipt.value
		if(pagesize <= 0){
			pagesize = 1
			ipt.value = 1
		}
		var num = Math.ceil(total/pagesize)
		for(var i=0;i<num;i++){
			var li = document.createElement("li")
			li.innerHTML = i+1
			ul.appendChild(li)
		}
		
		newArr = arr.slice((pagenum-1)*pagesize,pagenum*pagesize)
		olAddlI()
	}
	
	function olAddlI(){
		for(var i=0;i<newArr.length;i++){
			var li = document.createElement("li")
			li.innerHTML = newArr[i]
			ol.appendChild(li)
		}
	}
}