分页管理的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 ...
随机推荐
- CODEVS 1959 拔河比赛(另一版本)
题目描述 Description 一个学校举行拔河比赛,所有的人被分成了两组,每个人必须(且只能够)在其中的一组,要求两个组的人数相差不能超过1,且两个组内的所有人体重加起来尽可能地接近. 输入描述 ...
- HttpClient教程
2.1.持久连接 两个主机建立连接的过程是很复杂的一个过程,涉及到多个数据包的交换,并且也很耗时间.Http连接需要的三次握手开销很大,这一开销对于比较小的http消息来说更大.但是如果我们直接使用已 ...
- 使用UpdLock来扣减库存
UPDLOCK.UPDLOCK 的优点是允许您读取数据(不阻塞其它事务)并在以后更新数据,同时确保自从上次读取数据后数据没有被更改. 当我们用UPDLOCK来读取记录时可以对取到的记录加上更新锁,从而 ...
- 分子量 （Molar Mass,ACM/ICPC Seoul 2007,UVa 1586）
解题思路: 1.将分子量用double 数组记录下来 2.将字符串存储在字符数组中,从头向后扫描,一直记住“字母”,对下一个字符进行判断,是否是数字,如果是数字:用一个整数记录,本代码中用的sum,同 ...
- Web应用程序或者WinForm程序 调用 控制台应用程序及参数传递
有时候在项目中,会调用一个控制台应用程序去处理一些工作.那在我们的程序中要怎么样做才能调用一个控制台应用程序并将参数传递过去,控制台程序执行完后,我们的程序又怎样获取返回值?代码如下:调用代码: ...
- spring 标注 详解
http://snowolf.iteye.com/blog/578452 http://snowolf.iteye.com/blog/578452 非常棒的入门读物
- sqlmap注入检测
1.列出可利用数据库: sqlmap -u url --dbs 2.列出某个数据库中表: sqlmap -u url --tables -D south sqlmap -u ur ...
- Percona XtraDB Cluster(转)
Percona XtraDB Cluster是针对MySQL用户的高可用性和扩展性解决方案,基于Percona Server .其包括了Write Set REPlication补丁,使用Galera ...
- c++强制类型转换：dynamic_cast、const_cast 、static_cast、reinterpret_cast
c++强制类型转换:dynamic_cast.const_cast .static_cast.reinterpret_cast 博客分类: C/C++ CC++C#编程数据结构 dynamic_ca ...
- .Net开源工作流Roadflow的使用与集成(转)
序言 最近公司要整理公司内部oa系统,需要使用到工作流,所以就开始了开源工作流挑选,使用,到集成到公司内部系统的工作. 首先在网上搜了文档,自己也有补充,整理啦国内几款工作流的比较,由于没有个个击破式 ...