js完璧にtableの改ページを実現します.
53976 ワード
// 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,sPageId) {
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.pageId = sPageId;// span ID
this.__init__(); // ;
};
/*
*/
Page.prototype.__init__ = function () {
this.__oTable__ = document.getElementById(this.tableId); // table
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; // tBody
this.__pageInnerDiv__ = document.getElementById(this.pageId);
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try {
this.absolute = (this.absolute <= 0) || (this.absolute > this.rowCount) ? this.rowCount : this.absolute;
this.pageCount = parseInt(this.rowCount % this.absolute == 0
? this.rowCount / this.absolute : this.rowCount / this.absolute + 1);
} catch (exception) { }
this.__updateTableRows__();
};
/*
*/
Page.prototype.nextPage = function () {
if (this.pageIndex + 1 < this.pageCount) {
this.pageIndex += 1;
this.__updateTableRows__();
}
};
/*
*/
Page.prototype.prePage = function () {
if (this.pageIndex >= 1) {
this.pageIndex -= 1;
this.__updateTableRows__();
}
};
/*
*/
Page.prototype.firstPage = function () {
if (this.pageIndex != 0) {
this.pageIndex = 0;
this.__updateTableRows__();
}
};
/*
*/
Page.prototype.lastPage = function () {
if (this.pageIndex + 1 != this.pageCount) {
this.pageIndex = this.pageCount - 1;
this.__updateTableRows__();
}
};
/*
*/
Page.prototype.aimPage = function (iPageIndex) {
if (iPageIndex > this.pageCount - 1) {
this.pageIndex = this.pageCount - 1;
} else if (iPageIndex < 0) {
this.pageIndex = 0;
} else {
this.pageIndex = iPageIndex;
}
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);
//alert(this.dataRows.length);
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);
document.getElementById(this.pageId).innerHTML = " ：" + (this.pageIndex + 1);
};
/*
*/
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;
};使用例を表示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table id="divtable">
<tbody id="group_one">
<tr>
<td>
54898498
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4684646
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4987/7874
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
4654985498
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
74987498/
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
498496496
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
<tr>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
<td>
123213
</td>
</tr>
</tbody>
</table>
<span id="s"></span>
<a href="#" onclick="page.firstPage();"> </a>
<a href="#" onclick="page.prePage();"> </a>
<a href="#" onclick="page.nextPage();"> </a>
<a href="#" onclick="page.lastPage();"> </a>
<span id="pageindex"></span>
<script type="text/javascript">
$(document).ready(function() {
page = new Page(3, 'divtable', 'group_one', "pageindex");
});
</script>
<script src="JS/JSPager.js" type="text/javascript"></script>
</body>
</html>