JavaScript分頁(yè)功能的實(shí)現(xià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()%>條記錄 每頁(yè)顯示5條 <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ì)有所幫助。
- javascript 新聞標(biāo)題靜態(tài)分頁(yè)代碼 (無(wú)刷新)
- Javascript靜態(tài)分頁(yè)(多個(gè)資料,靜態(tài)自動(dòng)分頁(yè))
- 純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
- JavaScript實(shí)現(xiàn)列表分頁(yè)功能特效
- javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁(yè)
- 分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件
- 原生javascript實(shí)現(xiàn)的分頁(yè)插件pagenav
- 超酷的鼠標(biāo)拖拽翻頁(yè)(分頁(yè))效果實(shí)現(xiàn)javascript代碼
- JavaScript仿靜態(tài)分頁(yè)實(shí)現(xiàn)方法
相關(guān)文章
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來(lái)說(shuō),JavaScript中的數(shù)組是稀疏的,也就是說(shuō),數(shù)組中的元素之間可以有空隙,因?yàn)橐粋€(gè)數(shù)組其實(shí)就是一個(gè)鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組2012-09-09javascript:文字不間斷向左移動(dòng)的實(shí)例代碼
這篇文章介紹了javascript:文字不間斷向左移動(dòng)的實(shí)例代碼,有需要的朋友可以參考一下2013-08-08JavaScript實(shí)現(xiàn)開(kāi)關(guān)等效果
本文給大家分享一段簡(jiǎn)單的代碼基于js實(shí)現(xiàn)開(kāi)關(guān)燈效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng)
這篇文章主要介紹了JS設(shè)置自定義快捷鍵并實(shí)現(xiàn)圖片上下左右移動(dòng),文中通過(guò)使用自定義熱鍵或者使用鍵盤上下左右鍵移動(dòng)圖片,以此來(lái)實(shí)現(xiàn)此功能,需要的朋友可以參考下2019-10-10JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10網(wǎng)絡(luò)復(fù)制內(nèi)容時(shí)常用的正則+editplus
有時(shí)侯我們?cè)诳截惥W(wǎng)頁(yè)上的內(nèi)容的時(shí)候,總是有一些,開(kāi)頭的數(shù)字,需要替換掉2006-11-11