基于原生AJAX获取数据并渲染在页面实现分页效果点击按钮实现打开新的div窗口

最新推荐文章于 2021-07-04 03:26:39 发布

瑰

最新推荐文章于 2021-07-04 03:26:39 发布

阅读量1.1k

点赞数 2

分类专栏： HTML 文章标签：原生AJAX 前端实现分页效果点击按钮实现打开新的div窗口

本文链接：https://blog.csdn.net/lovexiuwei/article/details/93176661

版权

HTML 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			<div class="btn-group flex-btn-group-container" id="button-chk">
				<a type="button" class="btn-info btn-sm btn-ri" href = "javascript:void(0)" onmousemove="goPage(1,5);" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">查看</a>
			</div>
			    
			
			<div id="light" class="white_content" style="display: none;">
				<div>
					<a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a>
				</div>
				<div>
					<table border="0" cellspacing="15" cellpadding="">
						<tr class="table-td">
							<th>用户名</th>
							<th>注册</th>
							<th>手机号</th>
							<th>查询时间</th>
							<th>登录时间</th>
						</tr>
						<table id="jsondata" border="0" cellspacing="15" cellpadding=""></table>
						<table width="60%" align="right">
						  <tr><td><div id="barcon" name="barcon"></div></td></tr>
						</table>
					</table>
				</div>
			</div>
			<div id="fade" class="black_overlay"></div>
		</div>
	</body>
	
	
	<script type="text/javascript">
		document.getElementById('button-chk').addEventListener('click',loadjsondata);
	/*laing*/
		function loadjsondata(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET","json-data.json",true);
			xhr.onload = function(){
				if (this.status == 200){
					var jsondata = JSON.parse(this.responseText);
					console.log(jsondata);
					var output = '';
					
					//遍历数组
					for(var i in jsondata){
						output +=
						'<tr>'+
							'<td>'+jsondata[i].userName+'</td>'+
							'<td>'+jsondata[i].isRegister+'</td>'+
							'<td>'+jsondata[i].phone+'</td>'+
							'<td>'+jsondata[i].lastQueryTime+'</td>'+
							'<td>'+jsondata[i].loginTime+'</td>'+
						'</tr>';
					}
					document.getElementById('jsondata').innerHTML = output;
				}
			}
			xhr.send();
		}
	</script>
	<script>
	window.goPage = function(pno,psize){
			  var itable = document.getElementById("jsondata");
			  var num = itable.rows.length;//表格所有行数(所有记录数)
			  console.log(num);
			  var totalPage = 0;//总页数
			  var pageSize = psize;//每页显示行数
			  //总共分几页
			  if(num/pageSize > parseInt(num/pageSize)){
				  totalPage=parseInt(num/pageSize)+1;
				}else{
				  totalPage=parseInt(num/pageSize);
				}
			  var currentPage = pno;//当前页数
			  var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
				var endRow = currentPage * pageSize;//结束显示的行  40
				endRow = (endRow > num)? num : endRow;  //40
				console.log(endRow);
				//遍历显示数据实现分页
			  for(var i=1;i<(num+1);i++){
				var irow = itable.rows[i-1];
				if(i>=startRow && i<=endRow){
				  irow.style.display = "block";
				}else{
				  irow.style.display = "none";
				}
			  }
			  var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
			  if(currentPage>1){
				tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
				tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
			  }else{
				tempStr += "首页";
				tempStr += "<上一页";
			  }
			  if(currentPage<totalPage){
				tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
				tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
			  }else{
				tempStr += "下一页>";
				tempStr += "尾页";
			  }
			  document.getElementById("barcon").innerHTML = tempStr;
		}
	</script>
</html>

json-data.json :

瑰

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于原生AJAX获取数据并渲染在页面实现分页效果点击按钮实现打开新的div窗口

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <div class="btn-group flex-btn-group-c...
复制链接

扫一扫