JavaScript分頁功能的實現(xiàn)方法
更新時間:2015年04月25日 11:25:04 作者:AugustTrace
這篇文章主要介紹了JavaScript分頁功能的實現(xiàn)方法,涉及javascript操作分頁的相關技巧,需要的朋友可以參考下
本文實例講述了JavaScript分頁功能的實現(xiàn)方法。分享給大家供大家參考。具體實現(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"); //定義每頁的頁數(shù)及初始化table和tbody的id page = new Page(5, 'table', 'sTBodyId'); //初始加載init方法 page.__init__(); //初始更新表格 page.__updateTableRows__(); } //下面的所有方法,均寫到window.onload之外,否則運行有問題 function Page(iAbsolute, sTableId, sTBodyId) { //每頁顯示數(shù)據(jù)的條數(shù) this.absolute = iAbsolute; this.tableId = sTableId; this.tBodyId = sTBodyId; this.rowCount = 0;//記錄數(shù) this.pageCount = 0;//頁數(shù) this.pageIndex = 0;//頁索引 this.__oTable__ = null;//表格引用 this.__oTBody__ = null;//要分頁內(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ù)據(jù)條數(shù),如果定義的值<0或者定義的值>本來就有的行數(shù),那么初始化時顯示本來的行數(shù),否則為當前定義的行數(shù) this.absolute = (this.absolute <= 0) || (this.absolute > this.rowCount) ? this.rowCount : this.absolute; //定義初始化時該顯示幾頁數(shù)據(jù),也就是總頁數(shù) this.pageCount = parseInt(this.rowCount % this.absolute == 0 ? 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__(); } //執(zhí)行分頁時,更新顯示表格內(nèi)容 Page.prototype.__updateTableRows__ = function() { //pageIndex初始化時為0 //每頁顯示的數(shù)據(jù)*當前頁的索引 var iCurrentRowCount = this.absolute * this.pageIndex; //如果截止到當前頁的所有數(shù)據(jù)+每頁顯示的數(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"); //給他賦一個id值,為原來的id值 newTBody.setAttribute("id", this.tBodyId); for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount - iMoreRow; i++) { //重新給body添加節(jié)點 newTBody.appendChild(tempRows[i]); } //將新創(chuàng)建的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中的所有節(jié)點及其子節(jié)點都克隆一遍 for (var i = 0; i < this.__dataRows__.length; i++) { tempRows[i] = this.__dataRows__[i].cloneNode(1); } return tempRows; } </script> </head> <body> <!-- 這里有一個表格,內(nèi)容隨意,供分頁使用 --> <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程序設計有所幫助。
相關文章
JavaScript中的稀疏數(shù)組與密集數(shù)組[譯]
一般來說,JavaScript中的數(shù)組是稀疏的,也就是說,數(shù)組中的元素之間可以有空隙,因為一個數(shù)組其實就是一個鍵值映射.本文解釋了如何創(chuàng)建稀疏數(shù)組和不稀疏的數(shù)組2012-09-09JS中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
下面小編就為大家?guī)硪黄狫S中動態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10網(wǎng)絡復制內(nèi)容時常用的正則+editplus
有時侯我們在拷貝網(wǎng)頁上的內(nèi)容的時候,總是有一些,開頭的數(shù)字,需要替換掉2006-11-11