分页管理的AJAX实现

时间:2023-03-10 02:53:47
分页管理的AJAX实现

bookMgr.jsp

 <%--
Document : bookMgr.jsp
Created on : 2016-11-7, 9:48:21
Author : guanghe
--%> <%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页面</title>
<script src="js/jquery.js"></script>
<style>
.user
{
display:block;
width:50%;
text-align: right;
}
table ,tr ,td, th
{
text-align: center;
border:1px black solid;
border-collapse:collapse;
}
.setGray
{
background-color: gray;
}
.over
{
background-color:#f9360d;
}
</style>
<script>
function logout()
{
$.ajax
({
url:"logServlet.action",
data:{"option":"logout"},
type:"post",
dataType:"json",
success:function(data)
{
var option = data;
if(option == "true")
{
window.location.href = "login.jsp";
}
else if(option == "false")
{
alert("注销失败,请稍后重试!");
}
else if(option == "login")
{
window.location.href = "login.jsp";
}
},
error:function(data)
{
alert("服务器忙,请稍后重试!");
}
});
}
function query(currentPageNum,pageItemsCount)
{
var bookClass = $("#bookClass").val();
var bookName = $("#bookName").val();
var isBorrow = $("#isBorrow").val(); var showDiv = $("#showDiv");
showDiv.html("");
$.ajax
({
url:"queryServlet.action",
data:
{
"bookClass":bookClass,
"bookName":bookName,
"isBorrow":isBorrow,
"currentPageNum":currentPageNum,
"pageItemsCount":pageItemsCount,
"option":"queryBook"
},
type:"post",
dataType:"json",
success:function(data)
{
if(data == "login")
{
window.location.href = "login.jsp";
return;
}
var page = data;
var bookList = page.dataList;
showDiv.html("");
var table = $("<table width='700px' id='showTable'>");
table.append("<tr><th>编号</th><th>分类</th><th>名称</th><th>作者</th><th>出版社</th><th>是否借阅</th></tr>");
if(bookList == "" || bookList == null)
{
table.append("<tr><td colspan='6'>对不起,没有查询到任何结果!</td></tr>");
}
else
{
for(var i = 0; i < bookList.length; i++)
{
var content = "<tr>"+"<td>"+bookList[i].bookCode+"</td>"+
"<td>"+bookList[i].bookType+"</td>"+
"<td>"+bookList[i].bookName+"</td>"+
"<td>"+bookList[i].bookAuthor+"</td>"+
"<td>"+bookList[i].publishPress+"</td>";
if(bookList[i].isBorrow == 1)
{
content += "<td>已借阅</td></tr>";
}
else
{
content += "<td><a href='javascript:order("+JSON.stringify(bookList[i])+","+currentPageNum+","+pageItemsCount+");'>申请借阅</a></td></tr>";
}
table.append(content);
}
showPage(page);
}
showDiv.append(table);
setTableColor();
},
error:function(data)
{
alert("服务器忙,请稍后重试!");
}
});
}
function setTableColor()
{
var table = $("#showTable")[0];
for(var i = 0; i < table.rows.length; i++)
{
if(i % 2 == 0)
{
table.rows[i].className = "setGray";
}
var name;
table.rows[i].onmouseover = function()
{
name = this.className;
this.className = "over";
}
table.rows[i].onmouseout = function()
{
this.className = name;
}
}
}
function showPage(page)
{
var pageDiv = $("#pageDiv");
pageDiv.html("");
pageDiv.append("<a href='javascript:query("+page.firstPageNum+","+page.pageItemsCount+");'>首页</a>&nbsp;&nbsp;");
if(page.currentPageNum - 2 >= page.firstPageNum)
{
pageDiv.append("<a href='javascript:query("+(page.prePageNum-1)+","+page.pageItemsCount+");'>"+(page.currentPageNum-2)+"</a>&nbsp;&nbsp;");
}
if(page.hasPrePage)
{
pageDiv.append("<a href='javascript:query("+page.prePageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum-1)+"</a>&nbsp;&nbsp;");
}
pageDiv.append("<span style='color:green;font-weight:bold;'>"+page.currentPageNum+"</span>&nbsp;&nbsp;");
if(page.hasNextPage)
{
pageDiv.append("<a href='javascript:query("+page.nextPageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum+1)+"</a>&nbsp;&nbsp;");
}
if(page.currentPageNum + 2 <= page.lastPageNum)
{
pageDiv.append("<a href='javascript:query("+(page.nextPageNum+1)+","+page.pageItemsCount+");'>"+(page.currentPageNum+2)+"</a>&nbsp;&nbsp;");
}
pageDiv.append("<a href='javascript:query("+page.lastPageNum+","+page.pageItemsCount+");'>尾页</a>&nbsp;&nbsp;");
pageDiv.append("共"+page.pageCount+"页");
}
function order(book,currentPageNum,pageItemsCount)
{
if(confirm("确定要订阅"+book.bookName+"吗?"))
{
$.ajax
({
url:"queryServlet.action",
data:{"option":"order","bookCode":book.bookCode},
type:"post",
dataType:"json",
success:function(data)
{
if(data)
{
alert("订阅成功!");
query(currentPageNum,pageItemsCount);
}
else
{
alert("订阅失败!");
}
}
});
}
}
</script>
</head>
<body>
<div align="center">
<h1>图书借阅系统</h1>
图书分类:<select id="bookClass">
<option value="0">---请选择---</option>
<c:forEach items="${bookClass}" var="clazz" >
<option value="${clazz.key} ">${clazz.value} </option>
</c:forEach>
</select>&nbsp;
图书名称:<input type="text" id="bookName" />&nbsp;
是否借阅:<select id="isBorrow">
<option value="0">---请选择---</option>
<option value="1">已借阅</option>
<option value="2">未借阅</option>
</select>&nbsp;
<input type="button" id="query" value="查询" onclick="query(1,10);"/></br></br>
<span class="user">当前登录用户:${user.username}&nbsp;<a href="javascript:void(0)" onclick="logout();">退出</a></span></br>
<div id="showDiv"></div></br>
<div id="pageDiv"></div>
</div>
</body>
</html>

分页管理的AJAX实现