javaScript,Dwr分页模拟-阿里云开发者社区

在javaWeb开发中分页技术可以说是所处可见，分页的好坏，数据的显示的重要性，数据库访问的次数，页面更新的速度等等，无论是从客户端，还是服务器，好的分页技术，或者说是适合特定问题的处理的分页方式就格外重要。

分页可以从客户端考虑：

客户端发送一次请求，返回一批数据，通过javaScript,Dwr等操作根据用户对页面的操作来显示信息。

分页从服务器端考虑：

根据用户对信息的要求，从数据库中查询相应的信息，可是存储过程来提高访问的速度。

对于大批量的数据，大多数时候用户所需要的信息可是说是沧海一粟，所以这有关乎到信息的搜索问题。这里主要数如何建立分页将客户端的一次请求获取的数据通过页面来分批显示，这样可以减少对数据库的访问，同时处于客户端的用户也不会感到访问速度慢。

通过servlet/java程序将第一页的记录，显示在当前页面，第2页以后的分页显示

模拟一个分页：

创建一个实体类

import java.util.*;
public class Person {
private String name;
private String address;
public Person() {
}
public Person(String name, String address) {
this.name = name;
this.address = address;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String toString() {
return "[" + this.name + "," + this.address + "]";
}
}

创建一个Dao,用来模拟从数据库获得的信息，将获取的信息存储在List集合对象中。

import java.util.ArrayList;
import java.util.List;
public class PersonDao {
public List getAllPerson() {
List ls = new ArrayList();
Person p = null;
for (int i = 0; i <2; i++) {
p = new Person("name" + i, "address" + i);
ls.add(p);
}
return ls;
}
}

配置dwr.xml,web.xml文件

然后编写jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%
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>
<script type='text/javascript' src='/DivPageByAjax/dwr/interface/PersonDao.js'></script>
<script type='text/javascript' src='/DivPageByAjax/dwr/engine.js'></script>
<script type='text/javascript' src='/DivPageByAjax/dwr/util.js'></script>
<script type='text/javascript' src='js/div.js'></script>
<body onload="getInfo()">
<input type="hidden" id="page" name="page" value="0">
<label id="first"></label>
<label id="prev"></label>
<label id="next"></label>
<label id="last"></label>
<table id="tab" border="1">
</table>
</body>
</html>

接下来编写javaScript代码，用来操作java程序和页面的显示。

最终的结果如图：

当记录数不足一页的时候显示如下面的情况：

这仅仅是模拟分页，分页技术用的合适不合适要根据实际情况而顶，能在数据库方面对查询信息的操作能够优化的一定要优化。要从客户端和服务器端两方面来提高交互方法的效率和速度。

//定义一个全局的数组变量
var listInfo = new Array();
//获得表格
var tab;
//获得隐藏域
var page = 0;
//获得总页数
var pageNumber;
//dwr操作PeronDao类中的方法
function getInfo() {
PersonDao.getAllPerson(callGetInfo);
}
//回调信息,ls表示获得的数据（如果连接数据库的话，该数据来自数据库）
function callGetInfo(ls) {
//将获得的数据保存在数组中
listInfo = ls;
var len = listInfo.length;
if (len <= 0) {
pageNumber = 0;
} else {
pageNumber = listInfo.length % 10 == 0 ? listInfo.length / 10 : Math.floor(listInfo.length / 10 + 1);
}
insertInfo(page);
showLink();
}
//用0来表示第一页
//显示表格信息
function insertInfo(page) {
var begin = page * 10;
var end = (page + 1) * 10;
if (end > listInfo.length) {
end = listInfo.length;
}
for (i = begin; i < end; i++) {
insertRow(listInfo[i]);
}
}
//判断是否显示超级连接
function showLink() {
if (pageNumber - 1 <= 0) {
document.getElementById("first").innerHTML = "首页";
document.getElementById("prev").innerHTML = "上一页";
document.getElementById("next").innerHTML = "下一页";
document.getElementById("last").innerHTML = "尾页";
} else {
document.getElementById("first").innerHTML = "<a href='javaScript:showTable(1)'>首页</a>";
document.getElementById("prev").innerHTML = "<a href='javaScript:showTable(2)'>上一页</a>";
document.getElementById("next").innerHTML = "<a href='javaScript:showTable(3)'>下一页</a>";
document.getElementById("last").innerHTML = "<a href='javaScript:showTable(4)'>尾页</a>";
if (page == 0) {
//首页和上一页不显示
document.getElementById("first").innerHTML = "首页";
document.getElementById("prev").innerHTML = "上一页";
}
if (page == pageNumber - 1) {
//尾页和下一页不显示
document.getElementById("next").innerHTML = "下一页";
document.getElementById("last").innerHTML = "尾页";
}
}
}
//显示每一页的信息
function showTable(info) {
//每次换页的时候删除已经显示的信息
deleteRow();
tab = document.getElementById("tab");
page = document.getElementById("page").value;
//显示首页
if (info == 1) {
page = 0;
}
//上一页
if (info == 2) {
page = parseInt(page) - 1;
}
//下一页
if (info == 3) {
page = parseInt(page) + 1;
}
//最后一页
if (info == 4) {
page = pageNumber - 1;
}
document.getElementById("page").value = page;
showLink();
insertInfo(page);
}
//显示信息
function insertRow(obj) {
tab = document.getElementById("tab");
var lowLen = tab.rows.length;
var row = tab.insertRow(lowLen);
var cell;
cell = row.insertCell(0);
cell.innerHTML = obj.name;
cell = row.insertCell(1);
cell.innerHTML = obj.address;
}
//删除记录信息
function deleteRow() {
tab = document.getElementById("tab");
var lowLen = tab.rows.length;
for (i = 0; i < lowLen; i++) {
tab.deleteRow(0);
}
}