数据条目过多时如何在网页上分页显示

最新推荐文章于 2024-04-20 04:20:15 发布

yueloveme

最新推荐文章于 2024-04-20 04:20:15 发布

阅读量7.4k

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/yueloveme/article/details/77871399

版权

JAVA 专栏收录该内容

110 篇文章 0 订阅

订阅专栏

给大家推荐个靠谱的公众号程序员探索之路，大家一起加油

加载更多

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'products2.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
	//记录总页数
	var pageSum = 0;
	//记录当前页数
	var num = 0;
	//pageno为当前页码
	function showPro(pageno) {
		num = pageno;
		var xmlhttp = getXMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取到返回的内容
				var jsonStr = xmlhttp.responseText;
				//转换成JSON对象
				var jsonObject = JSON.parse(jsonStr);
				//获取总页数
				pageSum = jsonObject.pageSum;
				//获取数组
				var arr = jsonObject.list;
				
				if (arr.length > 0) {
					//获取列表对象
					var t = document.getElementById("tablepage");
					var html1 = "";
					//如果为第1页就加上列表的头      显示出加载更多
					if (pageno == 1) {
						html1 = "<tr><td>商品id</td><td>商品名称</td><td>商品价格</td><td>商品库存</td></tr>";
						document.getElementById("more").innerHTML="加载更多";
					}
					var html2 = "";
					for ( var i = 0; i < arr.length; i++) {
						html2 = html2 + "<tr><td>" + arr[i].id + "</td>";
						html2 = html2 + "<td>" + arr[i].name + "</td>";
						html2 = html2 + "<td>" + arr[i].price + "</td>";
						html2 = html2 + "<td>" + arr[i].count + "</td></tr>";
					}
					//当前显示的商品就是之前显示的加上现在的
					t.innerHTML += html1 + html2;
				} else {
					//搜过不到的情况
					alert("您输入的关键字不对");
					document.getElementById("context").value = "";
				}
			}
		};
		//默认查询第一页
		var url = "${pageContext.request.contextPath}/servlet/PageProductServlet?context="
				+ document.getElementById("context").value
				+ "&pageno="
				+ pageno;
		xmlhttp.open("get", url);
		xmlhttp.send();
	}
	function clickmore() {
		if ((num + 1) <= pageSum) {
			num++;
			showPro(num);
		} else {
			alert("下面没有商品了亲");
		}
	}
</script>
</head>

<body>
	<input type="text" id="context" name="content" />
	<button onclick="showPro(1)">搜索</button>
	<div>
		<table id="tablepage">
		</table>
	</div>
	<font id="more" onclick="clickmore()" color="green"></font>
</body>
</html>

分页的形式

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'products.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
	var pageSum = 0;
	//pageno为当前页码
	function showPro(pageno) {
		var xmlhttp = getXMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取到返回的内容
				var jsonStr = xmlhttp.responseText;
				//alert(jsonStr);
				//转换成JSON对象
				var jsonObject = JSON.parse(jsonStr);
				//获取总页数
				pageSum = jsonObject.pageSum;
				//获取shuzu
				var arr = jsonObject.list;
				if (arr.length > 0) {
					var t = document.getElementById("tablepage");
					var html1 = "<tr><td>商品id</td><td>商品名称</td><td>商品价格</td><td>商品库存</td></tr>";
					var html2 = "";
					for ( var i = 0; i < arr.length; i++) {
						html2 = html2 + "<tr><td>" + arr[i].id + "</td>";
						html2 = html2 + "<td>" + arr[i].name + "</td>";
						html2 = html2 + "<td>" + arr[i].price + "</td>";
						html2 = html2 + "<td>" + arr[i].count + "</td></tr>";
					}
					t.innerHTML = html1 + html2;
					getButton(pageno);
					document.getElementById("bt"+pageno).color="green";
				}else{
					alert("您输入的关键字不对");
					document.getElementById("context").value="";
				}
			}
		};
		//默认查询第一页
		var url = "${pageContext.request.contextPath}/servlet/PageProductServlet?context="
				+ document.getElementById("context").value
				+ "&pageno="
				+ pageno;
		xmlhttp.open("get", url);
		xmlhttp.send();
	}
	//生成页码
	function getButton(pageno) {
		var bt = document.getElementById("bt");
		//初始值赋值为当前页码  如果不符合分页那么就还是显示当前页码
		var r = pageno;
		var l = pageno;
		if ((pageno - 1) > 0) {
			r = pageno - 1;
		}
		if ((pageno + 1) <= pageSum) {
			l = pageno + 1;
		}
		//alert(pageno + "::" + r + "::" + l);
		var html1 = "<font><button onclick='showPro(" + r + ")'>上一页</button></font>";
		var html2 = "";
		for ( var i = 0; i < pageSum; i++) {
			html2 = html2 + "<font ><button id='bt"+(i+1)+"'onclick='showPro(" + (i + 1) + ")'>"
					+ (i + 1) + "</button></font>"
		}
		var html3 = "<font><button onclick='showPro(" + l + ")'>下一页</button></font>";
		bt.innerHTML = html1 + html2 + html3;
	}
</script>
</head>

<body>
	<input type="text" id="context" name="content"/>
	<button onclick="showPro(1)">搜索</button>
	<div>
		<table id="tablepage">
		</table>
	</div>
	<div id="bt"></div>
</body>
</html>

所需要的JSON格式的文本

// 获得搜索的内容
		String conText = request.getParameter("context");
		//String pg=request.getParameter("pageno");
		// 获得搜索的页码
		int pageNo = Integer.parseInt(request.getParameter("pageno")+"");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		Page page = productServiceImp.searchProductbyPageNo(conText, pageNo);
				
		JSONObject obj = JSONObject.fromObject(page);

yueloveme

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数据条目过多时如何在网页上分页显示

给大家推荐个靠谱的公众号程序员探索之路，大家一起加油加载更多&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt;% String path = request.getContextPath(); String basePath = request.getScheme() + ...
复制链接

扫一扫