分页管理的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> ");
if(page.currentPageNum - 2 >= page.firstPageNum)
{
pageDiv.append("<a href='javascript:query("+(page.prePageNum-1)+","+page.pageItemsCount+");'>"+(page.currentPageNum-2)+"</a> ");
}
if(page.hasPrePage)
{
pageDiv.append("<a href='javascript:query("+page.prePageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum-1)+"</a> ");
}
pageDiv.append("<span style='color:green;font-weight:bold;'>"+page.currentPageNum+"</span> ");
if(page.hasNextPage)
{
pageDiv.append("<a href='javascript:query("+page.nextPageNum+","+page.pageItemsCount+");'>"+(page.currentPageNum+1)+"</a> ");
}
if(page.currentPageNum + 2 <= page.lastPageNum)
{
pageDiv.append("<a href='javascript:query("+(page.nextPageNum+1)+","+page.pageItemsCount+");'>"+(page.currentPageNum+2)+"</a> ");
}
pageDiv.append("<a href='javascript:query("+page.lastPageNum+","+page.pageItemsCount+");'>尾页</a> ");
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>
图书名称：<input type="text" id="bookName" />
是否借阅：<select id="isBorrow">
<option value="0">---请选择---</option>
<option value="1">已借阅</option>
<option value="2">未借阅</option>
</select>
<input type="button" id="query" value="查询" onclick="query(1,10);"/></br></br>
<span class="user">当前登录用户：${user.username} <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 ...
随机推荐
- Dancing Links初学记
记得原来备战OI的时候,WCX大神就研究过Dancing Links算法并写了一篇blog.后来我还写了个搜索策略的小文章( http://www.cnblogs.com/pdev/p/3952279 ...
- jsp学习（五）
在进行jsp与jdbc连接时,出现这样一个错误,提示如下: java.net.ConnectException: Connection refused: connect 后来发现是由于mysql数据库 ...
- 我所了解的javaScript细节
变量转换 var myVar = "3.14159", str = ""+ myVar,// to string int = ~~myVar, // to in ...
- UVA1220Party at Hali-Bula(树的最大独立集 + 唯一性判断)
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=105116#problem/H 紫书P282 员工和直属老板只能选一个,最多选多少人 思路 ...
- 哈希加密算法 MD5,SHA-1,SHA-2,SHA-256,SHA-512,SHA-3,RIPEMD-160 - aTool
一.MD5哈希加密算法 atool.org MD5即Message-Digest Algorithm 5(信息-摘要算法 5),用于确保信息传输完整一致.是计算机广泛使用的散列算法之一(又译摘要算法. ...
- 修复VirtualBox "This kernel requires the following features not present on the CPU: pae Unable to boot
问题描述: 1.机器:Linux主机,特别是主机为大内存,比如: 4G内存的使用pae内核的Ubuntu系统的dell电脑. 2.情况:使用VirtualBox安装Linux系统时,比如:通过Virt ...
- hdu 5747 Aaronson
T : 1 n m: 10 2 题解:20 * 0 + 21* 1 + 22* 2 = 10 输出:3 <-- 0+1+2=3 AC 代码: #include<stdio ...
- ios开发@selector的函数如何传参数/如何传递多个参数
不同的类会有不同的传递方式,参数名也不尽相同.如果是传单个参数的就不用集合,如果是传多个参数可以用类似nsarray,nsdictionary之类的集合传递.看下面例子: 例子1: 通过NSTimer ...
- Powerdesigner自定义DBMS（以derby数据库为例）
Powerdesigner自定义DBMS Powerdesigner以下简称PD.PD默认支持的DBMS不够用时,我们就需要自己定义了.以apache derby数据库为例.1.DBMS的定义文件PD ...
- Android-调用优酷SDK上传视频
最近在研究用优酷的SDK来进行视频上传的功能,由于优酷的SDK只是提供了一个上传的sample code,没有涉及到授权的过程,对于新手来说,可能非常棘手,现在分享一下我的思路: 程序实现前我们先 ...