分页管理的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实现的更多相关文章

MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
winform分页管理
注意:其中可能用到部分自定义的扩展方法,在使用中需自己修改一下 /// <summary> /// 分页管理 /// </summary> public class Pagin ...
x86 保护模式十分页管理机制
x86 保护模式十分页管理机制 8.386开始支持分页管理机制段机制实现虚拟地址到线性地址的转换,分页机制实现线性地址到物理地址的转换.如果不启用分页,那么线性就是物理地址一分页管 ...
【操作系统之十】内存分页管理与swap
一.虚拟内存电脑里内存分内存条(这里我们叫物理内存)和硬盘,内存条保存程序运行时数据,硬盘持久保存数据.那么虚拟内存是什么? 程序运行会启动一个进程,进程里有程序段.全局数据.栈和堆,这些都会加载到内 ...
[转帖]运维必读：Linux 的内存分页管理
运维必读:Linux 的内存分页管理 https://cloud.tencent.com/developer/article/1356431 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在 ...
Linux的内存分页管理
作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存 ...
Linux的内存分页管理【转】
内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存管理的细节,特别是了解虚拟内存和内存分页的概念. 内存简单地说,内存就是一个数据货架.内存 ...
操作系统之Linux的内存分页管理
内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在其中保存数据.我将从内存的物理特性出发,深入到内存管理的细节,特别是了解虚拟内存和内存分页的概念. 内存简单地说,内存就是一个数据货架.内存 ...
多条件异步搜索+分页(PHP、 AJAX、ThinkPHP)
项目中遇到的多条件异步查询及数据分页问题,做了数次尝试,最终虽目的达到,略有繁琐,希望能有更好的处理方式基于 tp框架 1.html页面代码 <div class="h_cityNa ...

随机推荐

学习笔记-动态树Link-Cut-Tree
--少年你有梦想吗? --少年你听说过安利吗? 安利一个集训队讲解:http://wenku.baidu.com/view/75906f160b4e767f5acfcedb 关于动态树问题,有多种方法 ...
vim YouCompleteMe
http://www.ithao123.cn/content-1906969.html http://www.it165.net/os/html/201503/12190.html
JS 在线网站
JS 在线压缩网站国内压缩js网站http://tool.css-js.com/ uglifyjs 压缩js网站http://lisperator.net/uglifyjs JS在线格式化网站 ht ...
Java初学(七)
一.内部类 1.内部类概述:把类定义在其他类内部,这个类被称为内部类(内部类可以使用static修饰,外部类不可) 2.内部类访问特点:内部类可以直接访问外部类成员,包括私有的外部类要访问内 ...
实时获取UITextField内容
在UISearchBar中,当输入信息改变时,它就会调用textDidChange方法, 但是UITextField没有这个功能,要实现就得手动addTarget,其实controlevent里还有很 ...
WPF 动态布局Grid
//开启线程加载 Action a = () => { ; ; var path = "../../face_img/"; var files = Directory.Get ...
WPF 窗口在右下角出现，识别分辨率
直接上代码. Point brp = SystemParameters.WorkArea.BottomRight;//当前桌面右下角的位置
heap和stack有什么区别
1.heap是堆,stack是栈. 2.stack的空间由操作系统自动分配和释放,heap的空间是手动申请和释放的,heap常用new关键字来分配. 3.stack空间有限,heap的空间是很大的自由 ...
Jni中C++和Java的参数传递参数对照
Jni中C++和Java的参数传递如何使用JNI的一些基本方法和过程在网上多如牛毛,如果你对Jni不甚了解,不知道Jni是做什么的,如何建立一个基本的jni程序,或许可以参考下面下面这些文章:利用V ...
SSRS匿名访问
---本人数据库是SqlServer2008 R2 匿名访问Reporting Service 2008 我想通过访问Url的方式,把部署到Sql Server Reporting Service ...

分页管理的AJAX实现

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

随机推荐

热门专题