Ajax实现从数据库读取数据后,实现分页的操作:
1、 分页效果如图所示:
首先写一个分页的类。 Page.java
在里面封装 了总页数,当前页,总记录数。
2、 在servlet把获取的当前页信息传递过去。
Page page = new Page("Employee", nowPage);
List<Employee> emps = page.getDatas();
3、 在servlet中:
//在emps跟标签中就把 当前页 总记录数 总页数 传递过去了
out.println("<emps nowPage='"+page.getNowPage()+"' countSize='"+page.getCountSize()+"' countPage='"+page.getCountPage()+"'>");
4、 在index.jsp源码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<div align="center">
<div>
<h1>
员工界面
</h1>
<input type="button" value="查询员工" id="btn" />
<div id="showEmps">
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>
序号
</th>
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
出生日期
</th>
<th>
薪资
</th>
<th width="150px">
<font size="2px" color="black">删除所有项 <input type="checkbox" id="chk" /></font>
<input type="button" value="删除所选项" id="delBtn" />
</th>
</tr>
</thead>
<tbody id="emps"></tbody>
</table>
<div id="pages"></div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//窗体加载完毕后 触发该函数
window.onload = function(){
//当点击删除操作的时候
var delHtmlBtn = getNode("delBtn");
//注册事件
delHtmlBtn.onclick = function(){
var ids="";
var delchksNode = document.getElementsByName("delchk");
for(var i=0;i<delchksNode.length;i++){
if(delchksNode[i].checked){
ids+=delchksNode[i].value+",";
}
}
//第一步:创建xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//清空
clearNodes(empsHtmlNode);
xmlHttp.onreadystatechange = function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//获取 xmlDocument
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNode = xmlDoc.documentElement;
//获取 xml文件中 emp 的所有的元素节点
var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
//获取 emp 节点里边所有的孩子节点
for(var i=0;i<emps.length;i++){
//得到一个具体的emp:
var empNode = emps[i];
//为emp创建一行
var tr = document.createElement("tr");
//创建序号的 td
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
tr.appendChild(td1);
var elementNodes = empNode.childNodes; //name ,sex ,age
for(var j=0;j<elementNodes.length;j++){
//节点是否是元素节点
if(elementNodes[j].nodeType==1){
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
tr.appendChild(td2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type","checkbox");
delchk.setAttribute("name","delchk");
delchk.setAttribute("value",emps[i].getAttribute("id"));
tr.appendChild(delchk);
empsHtmlNode.appendChild(tr);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode,rootNode);
}
}
}
//第二步:规定请求参数
xmlHttp.open("GET","./servlet/DelEmployeeServlet?ids="+ids+"&timeStamp="+new Date().getTime(),true);
//第三步:发送请求
xmlHttp.send(null);
}
//实现全选 全部选的效果
var chksHtmlNode = getNode("chk");
//注册的事件
chksHtmlNode.onclick = function(){
var delchksNode = document.getElementsByName("delchk");
if(chksHtmlNode.checked){
for(var i=0;i<delchksNode.length;i++){
delchksNode[i].checked="checked";
}
}else{
for(var i=0;i<delchksNode.length;i++){
delchksNode[i].checked=null;
}
}
}
var pagesHtmlNode = getNode("pages");
var empsHtmlNode = getNode("emps");
//从服务器端 传递过了xml数据 在这里解析
//第一步:创建xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
var btnNode = getNode("btn");
btnNode.onclick = function(){
//清空
clearNodes(empsHtmlNode);
xmlHttp.onreadystatechange = function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//获取 xmlDocument
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNode = xmlDoc.documentElement;
//获取 xml文件中 emp 的所有的元素节点
var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
//获取 emp 节点里边所有的孩子节点
for(var i=0;i<emps.length;i++){
//得到一个具体的emp:
var empNode = emps[i];
//为emp创建一行
var tr = document.createElement("tr");
//创建序号的 td
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
tr.appendChild(td1);
var elementNodes = empNode.childNodes; //name ,sex ,age
for(var j=0;j<elementNodes.length;j++){
//节点是否是元素节点
if(elementNodes[j].nodeType==1){
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
tr.appendChild(td2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type","checkbox");
delchk.setAttribute("name","delchk");
delchk.setAttribute("value",emps[i].getAttribute("id"));
tr.appendChild(delchk);
empsHtmlNode.appendChild(tr);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode,rootNode);
}
}
}
//第二步:规定请求参数
xmlHttp.open("GET","./servlet/EmployeeServlet?timeStamp="+new Date().getTime(),true);
//第三步:发送请求
xmlHttp.send(null);
}
}
//添加分页实现的节点
function pagesNode(pagesHtmlNode,rootNode){
//获取当前页
var nowPage = rootNode.getAttribute("nowPage");
//获取总页数
var countPage = rootNode.getAttribute("countPage");
//获取总记录数
var countSize = rootNode.getAttribute("countSize");
var MsgNode = document.createTextNode("当前是"+nowPage+"页,总共"+countPage+"页,共"+countSize+"记录");
//清空方法
clearNodes(pagesHtmlNode);
var firstPage = document.createElement("a");
firstPage.setAttribute("href","#");
firstPage.appendChild(document.createTextNode("首页"));
firstPage.onclick = function(){
nowPage = 1;
//查询 当前页信息
getPagesInfo(nowPage)
}
pagesHtmlNode.appendChild(firstPage);
var backPage = document.createElement("a");
backPage.setAttribute("href","#");
backPage.appendChild(document.createTextNode("上一页"));
backPage.onclick = function(){
nowPage = eval(nowPage+"-"+1);
if(nowPage<=1){
nowPage=1;
}
// //查询 当前页信息
getPagesInfo(nowPage)
}
pagesHtmlNode.appendChild(backPage);
var nextPage = document.createElement("a");
nextPage.setAttribute("href","#");
nextPage.appendChild(document.createTextNode("下一页"));
nextPage.onclick = function(){
nowPage=eval(nowPage+"+"+1);
if(nowPage>=countPage){
nowPage=countPage;
}
//查询 当前页信息
getPagesInfo(nowPage)
}
pagesHtmlNode.appendChild(nextPage);
var lastPage = document.createElement("a");
lastPage.setAttribute("href","#");
lastPage.appendChild(document.createTextNode("末页"));
lastPage.onclick = function(){
nowPage = countPage;
//查询 当前页信息
getPagesInfo(nowPage)
}
pagesHtmlNode.appendChild(lastPage);
pagesHtmlNode.appendChild(MsgNode);
}
//清空操作
function clearNodes(node){
var lens = node.childNodes.length;
for(var i=0;i<lens;i++){
node.removeChild(node.childNodes[0]);
}
}
function getNode(id){
return document.getElementById(id);
}
//创建xmlHttpRequest对象
//ajax XMLHttpRequest对象
function createXMLHttpRequest(){
var xmlHttp;
try{
//firefox opera 等 非 IE的浏览器中
xmlHttp= new XMLHttpRequest();
}catch(ex){
try{
//IE浏览器
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//分页代码
function getPagesInfo(nowPage){
//修改chksHtmlNode 为 默认值
var chksHtmlNode = getNode("chk");
chksHtmlNode.checked=null;
var pagesHtmlNode = getNode("pages");
var empsHtmlNode = getNode("emps");
//从服务器端 传递过了xml数据 在这里解析
//第一步:创建xmlHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//清空
clearNodes(empsHtmlNode);
xmlHttp.onreadystatechange = function (){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//获取 xmlDocument
var xmlDoc = xmlHttp.responseXML;
//获取跟标签
var rootNode = xmlDoc.documentElement;
//获取 xml文件中 emp 的所有的元素节点
var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
//获取 emp 节点里边所有的孩子节点
for(var i=0;i<emps.length;i++){
//得到一个具体的emp:
var empNode = emps[i];
//为emp创建一行
var tr = document.createElement("tr");
//创建序号的 td
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
tr.appendChild(td1);
var elementNodes = empNode.childNodes; //name ,sex ,age
for(var j=0;j<elementNodes.length;j++){
//节点是否是元素节点
if(elementNodes[j].nodeType==1){
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
tr.appendChild(td2);
}
}
var delchk = document.createElement("input");
delchk.setAttribute("type","checkbox");
delchk.setAttribute("name","delchk");
delchk.setAttribute("value",emps[i].getAttribute("id"));
tr.appendChild(delchk);
empsHtmlNode.appendChild(tr);
empsHtmlNode.appendChild(tr);
}
//调用分页创建分页相关的node节点对象
pagesNode(pagesHtmlNode,rootNode);
}
}
}
//第二步:规定请求参数
xmlHttp.open("GET","./servlet/EmployeeServlet?nowPage="+nowPage+"&timeStamp="+new Date().getTime(),true);
//第三步:发送请求
xmlHttp.send(null);
}
//-->
</script>