分页管理的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 ...
随机推荐
- BZOJ-1433 假期的宿舍 最大流+基础建图
网络流练习ing.. 1433: [ZJOI2009]假期的宿舍 Time Limit: 10 Sec Memory Limit: 162 MB Submit: 1748 Solved: 765 [S ...
- Spring学习8-SSH+Log4j黄金整合
最下面有log4j的详解及配置步骤 步骤一.导入相应的jar包(具体参看下一篇博文) 步骤二.修改WEB.XML文件,内容如下: <?xml version="1.0" en ...
- 第一部分 mongodb 基础篇
什么是NoSQL认识MongoDBMongDB的下载与安装MongoDB的体系结构常用命令(基本的增删改查)客户端GUI工具集合 一: 什么是NoSql1 NoSQL简介NoSQL是Not Only ...
- background总结
1. background-position background-position的百分比属性规则是:图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合. 具体可参考: http ...
- 如何用jar命令对java工程进行打包
如何用jar命令对java工程进行打包 有时候为了更方便快捷的部署和执行Java程序,要把java应用程序打包成一个jar包.而这个基础的操作有时候也很麻烦,为了方便java程序员们能够方便的打包ja ...
- Android-调用优酷SDK上传视频
最近在研究用优酷的SDK来进行视频上传的功能,由于优酷的SDK只是提供了一个上传的sample code,没有涉及到授权的过程,对于新手来说,可能非常棘手,现在分享一下我的思路: 程序实现前我们先 ...
- 项目中用到的window.showModalDialog（来自网络）
window.showModalDialog相关: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showMo ...
- 陷阱~EF中的Update与Insert共用一个数据上下文
事情是这样的,有一个列表,里面有很多用户信息,可能会有重复的用户,将这个列表的用户插入到数据表中,如果用户已经存在,就更新这个用户的FillTimes 字段,让它加1,使用的底层ORM是entity ...
- [Effective JavaScript 笔记]第58条：区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- CentOS 7安装Splunk
导读 Splunk是探索和搜索数据的最有力工具,从收集和分析应用程序.Web服务器.数据库和服务器平台的实时可视化海量数据流,分析出IT企业产生的海量数据,安全系统或任何商业应用,给你一个总的见解获得 ...