列表及分页实例1

来源：互联网发布：舒尔特表软件下载编辑：程序博客网时间：2024/06/05 21:56

1. jsp页面中：

<HEAD>

body {

background-color: #FFFFFF;

margin-left: 0px;

margin-top: 10px;

margin-right: 0px;

margin-bottom: 0px;

}

-->

</style>

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;

};