给大家推荐个靠谱的公众号程序员探索之路,大家一起加油
加载更多
<%@ 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);