分页管理的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 ...
随机推荐
- HOPE——懦怯囚禁人的灵魂，希望可以感受自由。强者自救，圣者渡人。
人世间最美好的,就是希望 人世间最美好的,就是友谊 祝福所有相信希望的人,因为每个充满希望的人,都如此美丽. <肖申克的救赎>中的经典台词 1.Hope is a good thing, ...
- TortoiseSVN客户端如何更改新的URL
问题: 我们的服务器换了新的URL地址,这时候我们本地的SVN访问帐号和地址就要重新定义了. 解决步骤: 1:重新定义SVN的URL,右键(TortoiseSVN) → Relocate → 输入你新 ...
- Yii2.0 执行流程分析
1 index.php 2 ---->引入 vendor/auto_load.php 3 auto_load.php 4 ---->引入 ventor/composer/autoload_ ...
- eclipse中文乱码问题解决方案
eclipse之所以会出现乱码问题是因为eclipse编辑器选择的编码规则是可变的.一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如果该工程的编码方式与eclipse中设置的编码方式不同 ...
- configure: error: Please reinstall the libcurl distribution
configure: error: Please reinstall the libcurl distribution - easy.h should be in /include/curl/ 基本上 ...
- mysql 为字段增加主键
alter table 表名 add primary key(`字段`)
- SSL协议运行机制
SSL/TLS协议运行机制 一.作用 不使用SSL/TLS的HTTP通信,就是不加密的通信.所有信息明文传播,带来了三大风险. (1) 窃听风险(eavesdropping):第三方可以获知通信内容. ...
- Linux中iptables设置详细(转)
无论如何,iptables是一个需要特别谨慎设置的东西,万一服务器不在你身边,而你贸然设置导致无法SSH,那就等着被老板骂吧,呵呵... 以下内容是为了防止这种情况发生而写的,当然很初级,不过一般服务 ...
- 什么是Gn Gi Gb！
什么是Gn Gi Gb! 2013-08-24 23:58t百既3 | 浏览 776 次 2013-08-25 00:18 #“团队精英计划—个人高质赛ing!# 提问者采纳 答:这三个接口都是G ...
- javascript单体模式
单体模式的思想在于保证一个特定类仅有一个实例.这意味着当第二次使用同一个类创建的新对象的时候,应该得到与第一个所创建的对象完全相同. javacript中并没有类,因此对单体咬文嚼字的定义严格来说并没 ...