1. jsp页面中:
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title><dipper:message name="title" /></title>
<LINK HREF="../css/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript" src="js/dataTable.js"></script>
<script>
var page;
var tdObj;
var theIndex;
var theUrl;
var rowCount = 0;
window.onload = function(){
theUrl = "<%=url%>";
loadDataTable("<%=url%>","myResults",0);
};
</script>
</HEAD>
function loadDataTable(url,elementId,pageIndex){
tdObj = document.getElementById(elementId);
if(tdObj){
clearDatas();
if(url!=''){
createXMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = loadCallback;
xmlHttp.send(null);
}
}
theIndex = pageIndex;
}
function loadCallback(){
if(tdObj){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
loadDatas(xmlHttp.responseXML.getElementsByTagName("entity"));
} else {
if (xmlHttp.status == 204) {
}
}
}
}
}
function clearDatas() {
if(tdObj){
var rows = tdObj.getElementsByTagName("tr");
var l = rows.length;
while(l>0){
tdObj.deleteRow(rows[l-1]);
l--;
}
}
}
function loadDatas(nodes){
if(nodes){
for(var i=0;i<nodes.length;i++)
{
var node = nodes[i];
var row = document.createElement("tr");
row.className = "underline1";
var cns = node.childNodes;
for(var l=0;l<cns.length;l++){
var n_name = cns[l].nodeName;
var n_value= cns[l].text;
var cell_key = document.createElement("td");
cell_key.className = "idx_item3a";
cell_key.setAttribute("height","25");
cell_key.setAttribute("align","center");
cell_key.appendChild(document.createTextNode(n_value));
row.appendChild(cell_key);
}
tdObj.appendChild(row);
}
page = new Page(rowCount,"myTable","myResults");
page.updatePages();
var newCount = page.getPageCount();
if(theIndex==-100) page.aimPage(newCount);
else if(theIndex>-100 && theIndex<0) theIndex = 0;
else page.aimPage((theIndex+1));
}
}
function firstPage(){
//page = new Page(rowCount,"myTable","myResults");
theIndex = 0;
loadDataTable(theUrl,"myResults",theIndex);
}
function prePage(){
//var currIndex = page.getPageIndex();
theIndex = theIndex-1;
//if(theIndex<0) theIndex=0;
loadDataTable(theUrl,"myResults",theIndex);
}
function nextPage(){
var currIndex = page.getPageIndex();
theIndex = currIndex+1;
//if(theIndex<0) theIndex=0;
loadDataTable(theUrl,"myResults",theIndex);
}
function lastPage(){
theIndex = -100;
loadDataTable(theUrl,"myResults",theIndex);
}
function aimPage(pageIndex){
if(pageIndex=='0' || pageIndex=='1'){
theIndex = 0;
}else{
theIndex = pageIndex;
}
//page = new Page(rowCount,"myTable","myResults");
loadDataTable(theUrl,"myResults",theIndex);
var obj = document.getElementById("pageIndex");
if(obj) showInputValue(obj,"1");
}
function doSubmit(){
var url = "<%=url%>";
var entityId = listForm.entityId.value;
url = url + "?entityId=" + entityId;
var since = listForm.since.value;
var until = listForm.until.value;
url = url + "&since=" + since + "&until=" + until;
theUrl = url;
page = new Page(rowCount,"myTable","myResults");
loadDataTable(url,"myResults",0);
}
2. dataTable.js
// JavaScript Document
/**
* js分页类
* @param iAbsolute 每页显示记录数
* @param sTableId 分页表格属性ID值,为String
* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容
* @Version 1.0.0
* @author 辛现宝 2007-01-15 created
* var __variable__; private
* function __method__(){};private
*/
function Page(iAbsolute,sTableId,sTBodyId)
{
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0; //记录数
this.pageCount = 0; //页数
this.pageIndex = 0; //页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分页内容
this.__dataRows__ = 0;//记录行引用
this.__oldTBody__ = null;
this.init();
};
/*
初始化
*/
Page.prototype.init = function(){
this.__oTable__ = document.getElementById(this.tableId);//获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
};
Page.prototype.updatePages = function(){
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try{
if(this.absolute<=0 || this.absolute>this.rowCount) this.absolute = this.rowCount;
var thePage = (this.rowCount%this.absolute == 0)?(this.rowCount/this.absolute):(this.rowCount/this.absolute+1);
this.pageCount = parseInt(thePage);
//this.pageIndex = 1;
this.setPages();
this.updateTableRows();
}catch(exception){
alert("err");
}
};
Page.prototype.getPageIndex = function(){
return this.pageIndex;
};
Page.prototype.getPageCount = function(){
return this.pageCount;
};
Page.prototype.setPages = function(){
var firstObj = document.getElementById("firstPage");
var preObj = document.getElementById("prePage");
var nextObj = document.getElementById("nextPage");
var lastObj = document.getElementById("lastPage");
var toObj = document.getElementById("toPage");
if((this.pageIndex + 1)==1 && this.pageCount>1){
if(firstObj) showHideStyleVisibility(firstObj,"hidden");
if(preObj) showHideStyleVisibility(preObj,"hidden");
if(nextObj) showHideStyleVisibility(nextObj,"");
if(lastObj) showHideStyleVisibility(lastObj,"");
if(toObj) showHideStyleVisibility(toObj,"");
}else if((this.pageIndex + 1)==1 && this.pageCount==1){
if(firstObj) showHideStyleVisibility(firstObj,"hidden");
if(preObj) showHideStyleVisibility(preObj,"hidden");
if(nextObj) showHideStyleVisibility(nextObj,"hidden");
if(lastObj) showHideStyleVisibility(lastObj,"hidden");
if(toObj) showHideStyleVisibility(toObj,"hidden");
}
else if((this.pageIndex + 1)<this.pageCount){
if(firstObj) showHideStyleVisibility(firstObj,"");
if(preObj) showHideStyleVisibility(preObj,"");
if(nextObj) showHideStyleVisibility(nextObj,"");
if(lastObj) showHideStyleVisibility(lastObj,"");
if(toObj) showHideStyleVisibility(toObj,"");
}else if((this.pageIndex + 1)==this.pageCount){
if(firstObj) showHideStyleVisibility(firstObj,"");
if(preObj) showHideStyleVisibility(preObj,"");
if(nextObj) showHideStyleVisibility(nextObj,"hidden");
if(lastObj) showHideStyleVisibility(lastObj,"hidden");
if(toObj) showHideStyleVisibility(toObj,"");
}
var numberObj = document.getElementById("pageNumber");
if(numberObj) showInnerHTML(numberObj,(this.pageIndex+1));
var totalObj = document.getElementById("pageTotals");
if(totalObj) showInnerHTML(totalObj, this.pageCount);
};
function showHideStyleDisplay(obj,objValue){
if(obj) obj.style.display = objValue;
}
function showHideStyleVisibility(obj,objValue){
if(obj) obj.style.visibility = objValue;
}
function showInnerHTML(obj, objValue){
if(obj) obj.innerHTML = objValue;
}
function showInputValue(obj, objValue){
if(obj) obj.value = objValue;
}
/*
下一页
*/
Page.prototype.nextPage = function(){
if(this.pageIndex + 1 < this.pageCount){
this.pageIndex += 1;
this.setPages();
this.updateTableRows();
}
};
/*
上一页
*/
Page.prototype.prePage = function(){
if(this.pageIndex >= 1){
this.pageIndex -= 1;
this.setPages();
this.updateTableRows();
}
};
/*
首页
*/
Page.prototype.firstPage = function(){
if(this.pageIndex != 0){
this.pageIndex = 0;
this.setPages();
this.updateTableRows();
}
};
/*
尾页
*/
Page.prototype.lastPage = function(){
if(this.pageIndex+1 != this.pageCount){
this.pageIndex = this.pageCount - 1;
this.setPages();
this.updateTableRows();
}
};
/*
页定位方法
*/
Page.prototype.aimPage = function(iPageIndex){
if((iPageIndex-1) > this.pageCount-1){
this.pageIndex = this.pageCount - 1;
}else if((iPageIndex-1) < 0){
this.pageIndex = 0;
}else{
this.pageIndex = (iPageIndex-1);
}
var indexObj = document.getElementById("pageIndex");
if(indexObj){
showInputValue(indexObj, (this.pageIndex+1));
}
//alert(this.pageIndex);
this.setPages();
this.updateTableRows();
};
/*
执行分页时,更新显示表格内容
*/
Page.prototype.updateTableRows = function(){
var iCurrentRowCount = this.absolute * this.pageIndex;
var iMoreRow = (this.absolute+iCurrentRowCount > this.rowCount)?(this.absolute+iCurrentRowCount - this.rowCount):0;
var tempRows = this.__cloneRows__();
//alert(tempRows === this.dataRows);
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
var newTBody = document.createElement("TBODY");
newTBody.setAttribute("id", this.tBodyId);
for(var i=iCurrentRowCount; i < (this.absolute+iCurrentRowCount-iMoreRow); i++){
newTBody.appendChild(tempRows[i]);
}
this.__oTable__.appendChild(newTBody);
/*
this.dataRows为this.oTBody的一个引用,
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
//alert(this.dataRows.length);
//alert(this.absolute+iCurrentRowCount);
//alert("tempRows:"+tempRows.length);
};
/*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function(){
var tempRows = [];
for(var i=0; i<this.__dataRows__.length; i++){
/*
code:this.dataRows[i].cloneNode(param),
param = 1 or true:复制以指定节点发展出去的所有节点,
param = 0 or false:只有指定的节点和它的属性被复制.
*/
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};