分页管理的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>&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>

时间: 2024-10-12 00:05:58

分页管理的AJAX实现的相关文章

分页管理(编辑中)

分页管理的目标 前面博文中,通过自行构造HTML表格代码,可以生成易于管理.易于扩展的数据列表.但在实际应用中,数据量动则成百上千,单一页面根本无法完全显示所有数据.把所有数据进行分页后逐页显示,是当前比较流行的数据展示方式.因此,我们需要研究和表格方式展示数据相适应的分页管理机制. 分页显示的核心,是根据页面记录数.页号.查询条件.排序顺序等因素,在数据库中查出该页相对应的数据集(DataTable).按页返回数据集的功能,已经作为一个基本的功能被封装到AccessDB中了,通过AccessD

分段管理和分页管理的区别

分页和分段系统有许多相似之处. 比如,两者都采用离散分配方式,且都要通过地址映射机构来实现地址变换. 但在概念上两者完全不同,主要表现在下述三个方面. 1. 页是信息的物理单位,用户透明,长度固定. 分页是为实现离散分配方式,以消减内存的外零头,提高内存的利用率. 可以说分页仅仅是由于系统管理的需要而不是用户的需要. 段是信息的逻辑单位,用户可见,长度可变.它含有一组其意义相对完整的信息. 分段的目的是为了能更好地满足用户的需要. 2. 页的大小固定且由系统确定,把逻辑地址划分为页号和页内地址两

MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的UpdateTargetId属性,该属性值即是分页后要通过Ajax来更新的 DOM 元素的 ID. Ajax.Pager()方法返回AjaxPager对象,您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数,也可以通过新的AjaxPager的Opti

内存管理-基本分页管理方式

在存储器管理中,连续分配方式会形成许多"碎片",虽然可通过"紧凑"方法将许多碎片拼接成可用的大块空间,但须为之付出很大开销.如果允许将一个进程直接分散地装入到许多不相邻的分区中,则无须再进行"紧凑".基于这一思想而产生了离散分配方式.如果离散分配的基本单位是页,则称为分页存储管理方式.在分页存储管理方式中,如果不具备页面对换功能,则称为基本分页存储管理方式,或称为纯分页存储管理方式,它不具有支持实现虚拟存储器的功能,它要求把每个作业全部装入内存后

sqlserver 存储过程分页管理

-- =============================================-- Author:  <Author:刘畅>-- Create date: <Create Date:2014-07-31>-- Description: <Description:sqlserver 2008 R2 数据库分页存储过程> -- =============================================CREATE PROCEDURE pr_

《80X86汇编语言程序设计教程》二十三 分页管理机制实例

1.  理论知识参考"<80X86汇编语言程序设计教程>二十二 分页管理机制与虚拟8086模式".演示分页机制实例:初始化页目录表和部分页表:启用分页管理机制:关闭分页管理机制等.逻辑功能:在屏幕上显示一条表示已启用分页管理机制的提示信息.大体步骤是:在实模式下拷贝显示串程序的代码到预定义区域,转保护模式,初始化页目录和2个页表,开启分页机制,转入预定义区执行显示代码,然后关闭分页机制,重新回到实模式,程序终止. 2.  源代码 "386scd.asm"

Linux 的内存分页管理

架构师必读:Linux 的内存分页管理 来源:Linux爱好者 ID:LinuxHub 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存管理的细节,特别是了解虚拟内存和内存分页的概念. 内存 简单地说,内存就是一个数据货架.内存有一个最小的存储单位,大多数都是一个字节.内存用内存地址(memory address)来为每个字节的数据顺序编号.因此,内存地址说明了数据在内存中的位置.内存地址从0开始,每次增加1.这种线性增加的存储器地址称

[转帖]运维必读:Linux 的内存分页管理

运维必读:Linux 的内存分页管理 https://cloud.tencent.com/developer/article/1356431 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存管理的细节,特别是了解虚拟内存和内存分页的概念. ▉内存 简单地说,内存就是一个数据货架.内存有一个最小的存储单位,大多数都是一个字节.内存用内存地址(memory address)来为每个字节的数据顺序编号.因此,内存地址说明了数据在内存中的位置.

多条件异步搜索+分页(PHP、 AJAX、ThinkPHP)

项目中遇到的多条件异步查询及数据分页问题,做了数次尝试,最终虽目的达到,但.....希望能有更好的处理方式 基于 tp框架 1.html页面代码 <div class="h_cityName1"> <div class="h_cityName11"> <span>省</span> <ul class="h_publicB" id="province_id" name=&qu