分页简单实现

最新推荐文章于 2024-09-25 10:59:43 发布

qq_35657874

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量114

点赞数

分类专栏： java 文章标签： java html

本文链接：https://blog.csdn.net/qq_35657874/article/details/104336259

版权

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

纯html+js，直接用数组模拟后端返回数据
页面展示：
在这里插入图片描述
代码：

<html>
	<head>
		<title>分页</title>
	</head>
	
	<body>
		<div  style="margin-left: 500px; ">
			<table id="table">
				<thead>
					<th>省</th>
					<th>市</th>
					<th>县</th>
				</thead>
				<tbody id="tbody">
					
				</tbody>
			</table>
			<br>
			<div>
				<input type="button" value="上一页" onclick="pageUp()" id="pageUp"/>
				第<input type="text" style="width:50px;" id="page"/>页 
				<input type="button" value="跳转" onclick="pageTo()"/>
				<input type="button" value="下一页" onclick="pageDown()" id="pageDown"/>
				共<span style="width:50px; color:blue; " id="total"></span>页
			</div>
		
		</div>
	
		<style>
			table{
				text-align: center;
			}
			th{
				font-size: 16px;
				color: black;
				width: 100px;
				font-weight: bold;				
			}
			
			td{
				font-size: 14px;
				color: blue;
				width: 100px;
				border: 1px black solid;	
			}
		</style>
		
		<script>
			var pages = new Object();
			
			var cityEntities = new Array();
			cityEntities[0] = {province:"北京市", city:"北京市", district:"朝阳区"};
			cityEntities[1] = {province:"上海市", city:"上海市", district:"徐汇区"};
			cityEntities[2] = {province:"河南省", city:"新郑市", district:"龙湖镇"};
			cityEntities[3] = {province:"河南省", city:"郑州市", district:"二七区"};
			cityEntities[4] = {province:"河南省", city:"洛阳市", district:"老城区"};
						
			var page = 1;
			var limit = 2;
			
			getCitys(page, limit);
			
			function getCitys(page, limit){
				pages.total = cityEntities.length;
				pages.limit = limit;
				pages.page = page;
				var data = new Array();
				var city = (page-1) * limit;
				for(var i=0; i<limit && city+i<pages.total; i++){
					data[i] = cityEntities[city+i];
				}
				pages.data = data;
				//显示数据
				showCities();
				//改变分页数据显示
				changePages();
				
				if (page == 1) {
					document.getElementById("pageUp").disabled = true;
				} else {
					document.getElementById("pageUp").disabled = false;
				}
				
				if (page == Math.ceil(pages.total/limit)) {
					document.getElementById("pageDown").disabled = true;
				} else {
					document.getElementById("pageDown").disabled = false;
				}
			}
			
			function showCities(){
				var data = pages.data;
				var tbody = document.getElementById("tbody");
				tbody.innerHTML = "";
				for(var i=0; i<data.length; i++){
					var tr = document.createElement("tr");
					var td1 = document.createElement("td");
					td1.innerHTML = data[i].province;
					var td2 = document.createElement("td");
					td2.innerHTML = data[i].city;
					var td3 = document.createElement("td");
					td3.innerHTML = data[i].district;
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tbody.appendChild(tr);
				}
			}			
			
			function changePages(){
				var current = document.getElementById("page");
				current.value = pages.page;
				page = parseInt(pages.page);
				document.getElementById("total").innerHTML = (pages.total-1)/pages.limit+1;
				
			}
			
			function pageUp(){
				getCitys(page-1, limit);
			}
			function pageDown(){
				getCitys(page+1, limit);
			}
			function pageTo(){
				var page = document.getElementById("page").value;
				getCitys(page, limit);
			}
			
			
			
		</script>
	</body>

<html>