JavaScript分页功能制作

最新推荐文章于 2024-04-27 13:27:37 发布

小董大咖

最新推荐文章于 2024-04-27 13:27:37 发布

阅读量284

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ddf__/article/details/128507924

版权

页在网页上是一个很常见的功能，今天我们来实现一个分页的功能，效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/jquery.min.js"></script>
		<title></title>
	</head>
	<body>
		<style type="text/css">
			#button{
				display: flex;
			}
		</style>
		
		<div id="list">
			
		</div>
		<div id="button">
			<button onclick="up()">上一页</button>
			<div id="but">
				
			</div>
			<button onclick="bottom()">下一页</button>
		</div>
		<script type="text/javascript">
			let data = [{ //模拟数据（假设这就是从后台请求过来的数据）
					name: "沈阳市",
					value: ["123.429092", "41.796768"],
				},
				{
					name: "长春市",
					value: ["125.324501", "43.886841"],
				},
				{
					name: "哈尔滨市",
					value: ["126.642464", "45.756966"],
				},
				{
					name: "北京市",
					value: ["116.405289", "39.904987"],
				},
				{
					name: "天津市",
					value: ["117.190186", "39.125595"],
				},
				{
					name: "呼和浩特市",
					value: ["111.751990", "40.841490"],
				},
				{
					name: "银川市",
					value: ["106.232480", "38.486440"],
				},
				{
					name: "太原市",
					value: ["112.549248", "37.857014"],
				},
				{
					name: "石家庄市",
					value: ["114.502464", "38.045475"],
				},
				{
					name: "济南市",
					value: ["117.000923", "36.675808"],
				},
				{
					name: "郑州市",
					value: ["113.665413", "34.757977"],
				},
				{
					name: "西安市",
					value: ["108.948021", "34.263161"],
				},
				{
					name: "武汉市",
					value: ["114.298569", "30.584354"],
				},
				{
					name: "南京市",
					value: ["118.76741", "32.041546"],
				},
			]
 
			let page = {
				pageSize: 5, //每页显示多少数据
				currentPage: 1, //初始页面
				total: 0, //总共有多少条数据
			};
			let viewData = []; //页面要渲染的数据
			function aa(){
				page.total = data.length; //页面要显示的数据总条数
				viewData = data.slice((page.currentPage - 1) * page.pageSize, page.pageSize + ((page.currentPage - 1) * page
					.pageSize)); //这里就是截取出来第一页的十条数据
				// console.log(page.currentPage);
				let arr = "";
				for (let i = 0; i < viewData.length; i++) {
					arr += '<div id="box">'+ viewData[i].name +'</div>'
				}
				let Pagecount = Math.ceil(data.length / page.pageSize);
				let three = "";
				for (let i = 0; i < Pagecount; i++) {
					let is = i + 1;
					three += '<span onclick="previous_span(' + i +
						')" style="width:2vw" class="span_iner">' + is + '</span> ';
				}
				$("#but").html(three)
				$("#list").html(arr)
			}
			aa()
			// 上一页
			function up(){
				if(page.currentPage > 1){
					page.currentPage--;
					console.log(page.currentPage);
					aa()
				}else if (page.currentPage  == 1) {
					alert('第一页')
				}
			}
			// 下一页
			function bottom(){
				if (page.currentPage != Math.ceil(page.total / page.pageSize)) {	//判断当前页面不等于总条数除于每页多少条
					page.currentPage++;
					aa()
				}else if(page.currentPage == Math.ceil(page.total / page.pageSize)){    //判断当前页面等于总条数除于每页多少条
					alert('最后一页')
				}
			}
			// 点击哪个数字跳到相应的页数
			function previous_span(i) {
					let span_iner = document.getElementsByClassName('span_iner');
					page.currentPage = i + 1;
					aa()
				}
		</script>
	</body>
</html>