分页管理的AJAX实现
Posted 光何
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分页管理的AJAX实现相关的知识，希望对你有一定的参考价值。
bookMgr.jsp
1 <%--
2 Document : bookMgr.jsp
3 Created on : 2016-11-7, 9:48:21
4 Author : guanghe
5 --%>
6
7 <%@page contentType="text/html" pageEncoding="UTF-8"%>
8 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
9 <!DOCTYPE html>
10 <html>
11 <head>
12 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
13 <title>主页面</title>
14 <script src="js/jquery.js"></script>
15 <style>
16 .user
17 {
18 display:block;
19 width:50%;
20 text-align: right;
21 }
22 table ,tr ,td, th
23 {
24 text-align: center;
25 border:1px black solid;
26 border-collapse:collapse;
27 }
28 .setGray
29 {
30 background-color: gray;
31 }
32 .over
33 {
34 background-color:#f9360d;
35 }
36 </style>
37 <script>
38 function logout()
39 {
40 $.ajax
41 ({
42 url:"logServlet.action",
43 data:{"option":"logout"},
44 type:"post",
45 dataType:"json",
46 success:function(data)
47 {
48 var option = data;
49 if(option == "true")
50 {
51 window.location.href = "login.jsp";
52 }
53 else if(option == "false")
54 {
55 alert("注销失败，请稍后重试!");
56 }
57 else if(option == "login")
58 {
59 window.location.href = "login.jsp";
60 }
61 },
62 error:function(data)
63 {
64 alert("服务器忙，请稍后重试!");
65 }
66 });
67 }
68 function query(currentPageNum,pageItemsCount)
69 {
70 var bookClass = $("#bookClass").val();
71 var bookName = $("#bookName").val();
72 var isBorrow = $("#isBorrow").val();
73
74 var showDiv = $("#showDiv");
75 showDiv.html("");
76 $.ajax
77 ({
78 url:"queryServlet.action",
79 data:
80 {
81 "bookClass":bookClass,
82 "bookName":bookName,
83 "isBorrow":isBorrow,
84 "currentPageNum":currentPageNum,
85 "pageItemsCount":pageItemsCount,
86 "option":"queryBook"
87 },
88 type:"post",
89 dataType:"json",
90 success:function(data)
91 {
92 if(data == "login")
93 {
94 window.location.href = "login.jsp";
95 return;
96 }
97 var page = data;
98 var bookList = page.dataList;
99 showDiv.html("");
100 var table = $("<table width=\'700px\' id=\'showTable\'>");
101 table.append("<tr><th>编号</th><th>分类</th><th>名称</th><th>作者</th><th>出版社</th><th>是否借阅</th></tr>");
102 if(bookList == "" || bookList == null)
103 {
104 table.append("<tr><td colspan=\'6\'>对不起，没有查询到任何结果!</td></tr>");
105 }
106 else
107 {
108 for(var i = 0; i < bookList.length; i++)
109 {
110 var content = "<tr>"+"<td>"+bookList[i].bookCode+"</td>"+
111 "<td>"+bookList[i].bookType+"</td>"+
112 "<td>"+bookList[i].bookName+"</td>"+
113 "<td>"+bookList[i].bookAuthor+"</td>"+
114 "<td>"+bookList[i].publishPress+"</td>";
115 if(bookList[i].isBorrow == 1)
116 {
117 content += "<td>已借阅</td></tr>";
118 }
119 else
120 {
121 content += "<td><a href=\'javascript:order("+JSON.stringify(bookList[i])+","+currentPageNum+","+pageItemsCount+");\'>申请借阅</a></td></tr>";
122 }
123 table.append(content);
124 }
125 showPage(page);
126 }
127 showDiv.append(table);
128 setTableColor();
129 },
130 error:function(data)
131 {
132 alert("服务器忙，请稍后重试!");
133 }
134 });
135 }
136 function setTableColor()
137 {
138 var table = $("#showTable")[0];
139 for(var i = 0; i < table.rows.length; i++)
140 {
141 if(i % 2 == 0)
142 {
143 table.rows[i].className = "setGray";
144 }
145 var name;
146 table.rows[i].onmouseover = function()
147 {
148 name = this.className;
149 this.className = "over";
150 }
151 table.rows[i].onmouseout = function()
152 {
153 this.className = name;
154 }
155 }
156 }
157 function showPage(page)
158 {
159 var pageDiv = $("#pageDiv");
160 pageDiv.html("");
161 pageDiv.append("<a href=\'javascript:query("+page.firstPageNum+","+page.pageItemsCount+");\'>首页</a> ");
162 if(page.currentPageNum - 2 >= page.firstPageNum)
163 {
164 pageDiv.append("<a href=\'javascript:query("+(page.prePageNum-1)+","+page.pageItemsCount+");\'>"+(page.currentPageNum-2)+"</a> ");
165 }
166 if(page.hasPrePage)
167 {
168 pageDiv.append("<a href=\'javascript:query("+page.prePageNum+","+page.pageItemsCount+");\'>"+(page.currentPageNum-1)+"</a> ");
169 }
170 pageDiv.append("<span style=\'color:green;font-weight:bold;\'>"+page.currentPageNum+"</span> ");
171 if(page.hasNextPage)
172 {
173 pageDiv.append("<a href=\'javascript:query("+page.nextPageNum+","+page.pageItemsCount+");\'>"+(page.currentPageNum+1)+"</a> ");
174 }
175 if(page.currentPageNum + 2 <= page.lastPageNum)
176 {
177 pageDiv.append("<a href=\'javascript:query("+(page.nextPageNum+1)+","+page.pageItemsCount+");\'>"+(page.currentPageNum+2)+"</a> ");
178 }
179 pageDiv.append("<a href=\'javascript:query("+page.lastPageNum+","+page.pageItemsCount+");\'>尾页</a> ");
180 pageDiv.append("共"+page.pageCount+"页");
181 }
182 function order(book,currentPageNum,pageItemsCount)
183 {
184 if(confirm("确定要订阅"+book.bookName+"吗？"))
185 {
186 $.ajax
187 ({
188 url:"queryServlet.action",
189 data:{"option":"order","bookCode":book.bookCode},
190 type:"post",
191 dataType:"json",
192 success:function(data)
193 {
194 if(data)
195 {
196 alert("订阅成功!");
197 query(currentPageNum,pageItemsCount);
198 }
199 else
200 {
201 alert("订阅失败!");
202 }
203 }
204 });
205 }
206 }
207 </script>
208 </head>
209 <body>
210 <div align="center">
211 <h1>图书借阅系统</h1>
212 图书分类：<select id="bookClass">
213 <option value="0">---请选择---</option>
214 <c:forEach items="${bookClass}" var="clazz" >
215 <option value="${clazz.key} ">${clazz.value} </option>
216 </c:forEach>
217 </select>
218 图书名称：<input type="text" id="bookName" />
219 是否借阅：<select id="isBorrow">
220 <option value="0">---请选择---</option>
221 <option value="1">已借阅</option>
222 <option value="2">未借阅</option>
223 </select>
224 <input type="button" id="query" value="查询" onclick="query(1,10);"/></br></br>
225 <span class="user">当前登录用户：${user.username} <a href="javascript:void(0)" onclick="logout();">退出</a></span></br>
226 <div id="showDiv"></div></br>
227 <div id="pageDiv"></div>
228 </div>
229 </body>
230 </html>
以上是关于分页管理的AJAX实现的主要内容，如果未能解决你的问题，请参考以下文章