分页管理的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                 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>&nbsp;&nbsp;");
162                 if(page.currentPageNum - 2 >= page.firstPageNum)
163                 {
164                     pageDiv.append("<a href='javascript:query("+(page.prePageNum-1)+","+page.pageItemsCount+");'>"+(page.currentPageNum-2)+"</a>&nbsp;&nbsp;");
165                 }
166                 if(page.hasPrePage)
167                 {
168                     pageDiv.append("<a href='javascript:query("+page.prePageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum-1)+"</a>&nbsp;&nbsp;");
169                 }
170                    pageDiv.append("<span style='color:green;font-weight:bold;'>"+page.currentPageNum+"</span>&nbsp;&nbsp;");
171                 if(page.hasNextPage)
172                 {
173                     pageDiv.append("<a href='javascript:query("+page.nextPageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum+1)+"</a>&nbsp;&nbsp;");
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>&nbsp;&nbsp;");
178                 }
179                 pageDiv.append("<a href='javascript:query("+page.lastPageNum+","+page.pageItemsCount+");'>尾页</a>&nbsp;&nbsp;");
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>&nbsp;
218             图书名称:<input type="text" id="bookName" />&nbsp;
219             是否借阅:<select id="isBorrow">
220             <option value="0">---请选择---</option>
221             <option value="1">已借阅</option>
222             <option value="2">未借阅</option>
223             </select>&nbsp;
224             <input type="button" id="query" value="查询" onclick="query(1,10);"/></br></br>
225             <span class="user">当前登录用户:${user.username}&nbsp;<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>

 

原文地址:https://www.cnblogs.com/guanghe/p/6049535.html