JavaScript分頁功能的實作方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript分頁功能的實作方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:02 PM

javascript分頁功能

本文實例講述了JavaScript分頁功能的實作方法。分享給大家供大家參考。具體實作方法如下：

<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");
//定义每页的页数及初始化table和tbody的id
page = new Page(5, 'table', 'sTBodyId');
//初始加载init方法
page.__init__();
//初始更新表格
page.__updateTableRows__();
}
//下面的所有方法，均写到window.onload之外，否则运行有问题
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;
}
//初始化
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的总行数
this.rowCount = this.__dataRows__.length;
try {
//判断初始化时每页显示的数据条数，如果定义的值<0或者定义的值>本来就有的行数，那么初始化时显示本来的行数，否则为当前定义的行数
this.absolute = (this.absolute <= 0)
|| (this.absolute > this.rowCount) &#63; this.rowCount
: this.absolute;
//定义初始化时该显示几页数据，也就是总页数
this.pageCount = parseInt(this.rowCount % this.absolute == 0 &#63; this.rowCount
/ this.absolute
: this.rowCount / this.absolute + 1);
} catch (exception) {
}
}
//下一页
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() {
//pageIndex初始化时为0
//每页显示的数据*当前页的索引
var iCurrentRowCount = this.absolute * this.pageIndex;
//如果截止到当前页的所有数据+每页显示的数据>总数据条数，则还需要显示this.absolute+ iCurrentRowCount - this.rowCount这些数据，否则，显示0条数据
var iMoreRow = this.absolute + iCurrentRowCount > this.rowCount &#63; 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__);
//重新创建tbody
var newTBody = document.createElement("TBODY");
//给他赋一个id值，为原来的id值
newTBody.setAttribute("id", this.tBodyId);
for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount
- iMoreRow; i++) {
//重新给body添加节点
newTBody.appendChild(tempRows[i]);
}
//将新创建的tbody加到table中
this.__oTable__.appendChild(newTBody);
/*
  this.dataRows为this.oTBody的一个引用，
移除this.oTBody那么this.dataRows引用将销失,
  code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
}
//克隆原始操作行集合
Page.prototype.__cloneRows__ = function() {
var tempRows = [];
//将当前body中的所有节点及其子节点都克隆一遍
for (var i = 0; i < this.__dataRows__.length; i++) {
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
}
</script>
</head>
<body>
<!-- 这里有一个表格，内容随意，供分页使用 -->
<table width="100%" cellpadding="0" cellspacing="0" border="1"
style="padding: 2">
<tr>
<td colspan="3" align="center">总共：<%=connDataList.size()%>条记录 每页显示5条 
<a href="javascript:void(0);"
onclick="page.firstPage();return false;">首页</a> <a
href="javascript:void(0);" onclick="page.prePage();return false;">上一页</a>
<a href="javascript:void(0);"
onclick="page.nextPage();return false;">下一页</a> <a
href="javascript:void(0);" onclick="page.lastPage();return false;">尾页</a>
<span id="pageindex"></span>
</td>
</tr>
</table>
</body>
</html>

希望本文所述對大家的javascript程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。