快捷導(dǎo)航

JavaScript分頁(yè)功能的實(shí)現(xiàn)方法

更新時(shí)間：2015年04月25日 11:25:04 作者：AugustTrace

這篇文章主要介紹了JavaScript分頁(yè)功能的實(shí)現(xiàn)方法,涉及javascript操作分頁(yè)的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript分頁(yè)功能的實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<script>
//定義page為全局變量，以便下面使用
var page;
window.onload = function() {
var table = document.getElementById("table");
var btnAdd = document.getElementById("btnAdd");
var btnModify = document.getElementById("btnModify");
var btnDel = document.getElementById("btnDel");
var btnRefresh = document.getElementById("btnRefresh");
var headCheck = document.getElementById("headCheck");
//定義每頁(yè)的頁(yè)數(shù)及初始化table和tbody的id
page = new Page(5, 'table', 'sTBodyId');
//初始加載init方法
page.__init__();
//初始更新表格
page.__updateTableRows__();
}
//下面的所有方法，均寫(xiě)到window.onload之外，否則運(yùn)行有問(wèn)題
function Page(iAbsolute, sTableId, sTBodyId) {
//每頁(yè)顯示數(shù)據(jù)的條數(shù)
this.absolute = iAbsolute; 
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;//記錄數(shù)
this.pageCount = 0;//頁(yè)數(shù)
this.pageIndex = 0;//頁(yè)索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分頁(yè)內(nèi)容
this.__dataRows__ = 0;//記錄行引用
this.__oldTBody__ = null;
}
//初始化
Page.prototype.__init__ = function() {
//獲取table引用
this.__oTable__ = document.getElementById(this.tableId);
//獲取tBody引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];
//獲取tbody的行
this.__dataRows__ = this.__oTBody__.rows;
//獲取tbody的總行數(shù)
this.rowCount = this.__dataRows__.length;
try {
//判斷初始化時(shí)每頁(yè)顯示的數(shù)據(jù)條數(shù)，如果定義的值<0或者定義的值>本來(lái)就有的行數(shù)，那么初始化時(shí)顯示本來(lái)的行數(shù)，否則為當(dāng)前定義的行數(shù)
this.absolute = (this.absolute <= 0)
|| (this.absolute > this.rowCount) ? this.rowCount
: this.absolute;
//定義初始化時(shí)該顯示幾頁(yè)數(shù)據(jù)，也就是總頁(yè)數(shù)
this.pageCount = parseInt(this.rowCount % this.absolute == 0 ? this.rowCount
/ this.absolute
: this.rowCount / this.absolute + 1);
} catch (exception) {
}
}
//下一頁(yè)
Page.prototype.nextPage = function() {

if (this.pageIndex + 1 < this.pageCount) {
this.pageIndex += 1;
this.__updateTableRows__();
}
}
//上一頁(yè)
Page.prototype.prePage = function() {
if (this.pageIndex >= 1) {
this.pageIndex -= 1;
this.__updateTableRows__();
}
}
//首頁(yè)
Page.prototype.firstPage = function() {
if (this.pageIndex != 0) {
this.pageIndex = 0;
this.__updateTableRows__();
}
}

//尾頁(yè)
Page.prototype.lastPage = function() {
if (this.pageIndex + 1 != this.pageCount) {
this.pageIndex = this.pageCount - 1;
this.__updateTableRows__();
}
}
//頁(yè)定位方法
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__();
}
//執(zhí)行分頁(yè)時(shí)，更新顯示表格內(nèi)容
Page.prototype.__updateTableRows__ = function() {
//pageIndex初始化時(shí)為0
//每頁(yè)顯示的數(shù)據(jù)*當(dāng)前頁(yè)的索引
var iCurrentRowCount = this.absolute * this.pageIndex;
//如果截止到當(dāng)前頁(yè)的所有數(shù)據(jù)+每頁(yè)顯示的數(shù)據(jù)>總數(shù)據(jù)條數(shù)，則還需要顯示this.absolute+ iCurrentRowCount - this.rowCount這些數(shù)據(jù)，否則，顯示0條數(shù)據(jù)
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);
//將tbody從table中移除
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
//重新創(chuàng)建tbody
var newTBody = document.createElement("TBODY");
//給他賦一個(gè)id值，為原來(lái)的id值
newTBody.setAttribute("id", this.tBodyId);
for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount
- iMoreRow; i++) {
//重新給body添加節(jié)點(diǎn)
newTBody.appendChild(tempRows[i]);
}
//將新創(chuàng)建的tbody加到table中
this.__oTable__.appendChild(newTBody);
/*
  this.dataRows為this.oTBody的一個(gè)引用，
移除this.oTBody那么this.dataRows引用將銷失,
  code:this.dataRows = tempRows;恢復(fù)原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
}
//克隆原始操作行集合
Page.prototype.__cloneRows__ = function() {
var tempRows = [];
//將當(dāng)前body中的所有節(jié)點(diǎn)及其子節(jié)點(diǎn)都克隆一遍
for (var i = 0; i < this.__dataRows__.length; i++) {
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
}
</script>
</head>
<body>
<!-- 這里有一個(gè)表格，內(nèi)容隨意，供分頁(yè)使用 -->
<table width="100%" cellpadding="0" cellspacing="0" border="1"
style="padding: 2">
<tr>
<td colspan="3" align="center">總共：<%=connDataList.size()%>條記錄&nbsp;每頁(yè)顯示5條&nbsp;
<a href="javascript:void(0);"
onclick="page.firstPage();return false;">首頁(yè)</a> <a
href="javascript:void(0);" onclick="page.prePage();return false;">上一頁(yè)</a>
<a href="javascript:void(0);"
onclick="page.nextPage();return false;">下一頁(yè)</a> <a
href="javascript:void(0);" onclick="page.lastPage();return false;">尾頁(yè)</a>
<span id="pageindex"></span>
</td>
</tr>
</table>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: