HTML+JS实现动态获取的内容的翻页显示

最新推荐文章于 2024-09-26 19:24:27 发布

HXZz

最新推荐文章于 2024-09-26 19:24:27 发布

阅读量1.6k

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.youkuaiyun.com/m0_48182879/article/details/106643500

版权

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

整体思路：

先从后台读取要列出的日志的总条数。
把当前的页数和每页显示的数量和某些参数放在GET里进行传递。
根据参数从后台动态抓取内容显示。
根据参数来显示页码导航。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<title>日志查询</title>
	<link rel="stylesheet"  href="css/style.css" type="text/css">
</head>
<body class="iframe">
	<b>日志查询</b>
	<select id="perPage" style="float:right;" onchange="listLog('a');">
		<option value="20" selected>每页显示20条</option>
		<option value="50">每页显示50条</option>
		<option value="100">每页显示100条</option>
	</select>
	<hr>
	<select id="owner" onchange="listLog('a');">
		<option value="blue">Blue</option>
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="all" selected>请选择查询的用户名</option>
	</select>
	<p id="logList">日志记录</p>
	<form>
		<input class="turntopage" id="btn0" type="button" value="首页">
		<input class="turntopage" id="btn1" type="button" value="1">
		<input class="turntopage" id="btn2" type="button" value="2">
		<input class="turntopage" id="btn3" type="button" value="3">
		<input class="turntopage" id="btn4" type="button" value="4">
		<input class="turntopage" id="btn5" type="button" value="5">
		<input class="turntopage" id="btn6" type="button" value="尾页">
	</form>
	<script language="JavaScript" type="text/javascript" src="javascript/jquery-3.2.1.min.js"></script>
	<script language="JavaScript" type="text/javascript" src="javascript/myjs.js"></script>
	<script>
		listLog();
		function listLog(a){
			var totalrecord = getQueryString("totalrecord");
			var page = getQueryString("page");
			if((a)||(totalrecord == null)){
				$.get("php/infoquery-log.php?getlogrecord=true"+"&owner="+$("#owner").val(),
					function(data){
						if (data == "nologinuser"){	$("#logList").html("用户未登录");return;}
						var url="infoquery-log.html?&totalrecord="+data+"&owner="+$("#owner").val()+"&page=1&perpage="+$("#perPage").val();
						$(location).attr('href', url);
					}
				)
			}else{
				var owner = getQueryString("owner");
				var perpage = getQueryString("perpage");
				$("#owner").val(owner);
				$("#perPage").val(perpage);
				$.get("php/infoquery-log.php?listlogrecord=true"+"&owner="+owner+"&perpage="+perpage+"&page="+page,
					function(data){
						$("#logList").html(data);
					}
				)
			perpage =Number(perpage);
			maxpage =Number(totalrecord);
			maxpage =Math.ceil(maxpage/perpage);
			page =Number(page);
			if((page<3)||(maxpage<6)){
				showpage=1;    //如果当前页码小于3或者最大页码小于6，则其实页码为1
			}else{
				var endpage=maxpage-2;     //中间能显示的最大页码等于最大页码减去2，保证最大页码显示在最右边
				if (page>endpage){
					showpage=endpage-2;
				}else{
					showpage=page-2;     //一般情形下，当前页码在中间显示
				}
			} 
			var i;
			for(i=1;i<6;i++){
				if (showpage==page){
					$("#btn"+i).css("background-color","#666666");
				}
				$("#btn"+i).val(showpage);
				if (showpage>maxpage){
					$("#btn"+i).hide();
				}
				showpage++;
			}

				
			}
		}
		
		$(".turntopage").click(function(){
			var totalrecord = getQueryString("totalrecord");
			var deviceSn = getQueryString("deviceSn");
			var owner = getQueryString("owner");
			var perpage = getQueryString("perpage");
			if($(this).val() == "首页"){
				page = 1;
			}else if($(this).val() == "尾页"){
				//totalrecord = Number(totalrecord);
				page =Math.ceil(totalrecord/perpage);
			}else{
				page = $(this).val();
			}	
			var url = "infoquery-log.html?&totalrecord="+totalrecord+"&owner="+owner+"&page="+page+"&perpage="+perpage;
			$(location).attr('href', url);			
		})
	</script>
</body>
</html>

运行结果：