JavaScript分页功能制作

该代码示例展示了一个使用JavaScript进行分页处理的HTML页面。它通过模拟数据创建了一个分页系统,用户可以点击“上一页”和“下一页”按钮进行浏览。页面每页显示5条数据,可动态切换页面并更新显示内容。
摘要由CSDN通过智能技术生成
<!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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值