JavaScript page function implementation method

This article gives an example of how to implement JavaScript paging. Share to everybody for everybody reference. Specific implementation methods are as follows:

<script>
// define page Is a global variable for use below 
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");
// Defines the number of pages per page and initialization table and tbody the id
page = new Page(5, 'table', 'sTBodyId');
// The initial load init methods 
page.__init__();
// Initial update form 
page.__updateTableRows__();
}
// All of the following methods are written window.onload Otherwise, there is a problem running 
function Page(iAbsolute, sTableId, sTBodyId) {
// The number of pieces of data displayed per page 
this.absolute = iAbsolute; 
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;// Record number 
this.pageCount = 0;// Number of pages 
this.pageIndex = 0;// Index page 
this.__oTable__ = null;// Table references 
this.__oTBody__ = null;// To page content 
this.__dataRows__ = 0;// Record line reference 
this.__oldTBody__ = null;
}
// Initialize the 
Page.prototype.__init__ = function() {
// To obtain table reference 
this.__oTable__ = document.getElementById(this.tableId);
// To obtain tBody reference 
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];
// To obtain tbody The rows of 
this.__dataRows__ = this.__oTBody__.rows;
// To obtain tbody The total number of rows of 
this.rowCount = this.__dataRows__.length;
try {
// Determines the number of data bars per page displayed when initialized, if the defined value <0 Or defined values > The number of rows is already there, so the original number is displayed when initialized, otherwise it is the number of rows currently defined 
this.absolute = (this.absolute <= 0)
|| (this.absolute > this.rowCount) ? this.rowCount
: this.absolute;
// Define how many pages of data should be displayed when initialized, that is, the total number of pages 
this.pageCount = parseInt(this.rowCount % this.absolute == 0 ? this.rowCount
/ this.absolute
: this.rowCount / this.absolute + 1);
} catch (exception) {
}
}
// Under the 1 page 
Page.prototype.nextPage = function() {

if (this.pageIndex + 1 < this.pageCount) {
this.pageIndex += 1;
this.__updateTableRows__();
}
}
// on 1 page 
Page.prototype.prePage = function() {
if (this.pageIndex >= 1) {
this.pageIndex -= 1;
this.__updateTableRows__();
}
}
// Home page 
Page.prototype.firstPage = function() {
if (this.pageIndex != 0) {
this.pageIndex = 0;
this.__updateTableRows__();
}
}

// back 
Page.prototype.lastPage = function() {
if (this.pageIndex + 1 != this.pageCount) {
this.pageIndex = this.pageCount - 1;
this.__updateTableRows__();
}
}
// Page positioning method 
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__();
}
// When paging is performed, the table contents are updated 
Page.prototype.__updateTableRows__ = function() {
//pageIndex When initialized 0
// The data displayed per page * Index of the current page 
var iCurrentRowCount = this.absolute * this.pageIndex;
// If all data ends on the current page + The data displayed per page > Total according to the number of items, also need to display this.absolute+ iCurrentRowCount - this.rowCount These data are otherwise displayed 0 The data 
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);
// will tbody from table Remove the 
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
// To recreate the tbody
var newTBody = document.createElement("TBODY");
// To his assignment 1 a id Value, is the original id value 
newTBody.setAttribute("id", this.tBodyId);
for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount
- iMoreRow; i++) {
// Back to the body Add a node 
newTBody.appendChild(tempRows[i]);
}
// Will be newly created tbody Added to the table In the 
this.__oTable__.appendChild(newTBody);
/*
  this.dataRows for this.oTBody the 1 A reference, 
 remove this.oTBody then this.dataRows References will be cancelled ,
  code:this.dataRows = tempRows; Restore the original set of operation rows .
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
}
// Clone the original set of operation rows 
Page.prototype.__cloneRows__ = function() {
var tempRows = [];
// The current body All nodes and their children are cloned 1 through 
for (var i = 0; i < this.__dataRows__.length; i++) {
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
}
</script>
</head>
<body>
<!--  There's a 1 Table, content optional, for paging use  -->
<table width="100%" cellpadding="0" cellspacing="0" border="1"
style="padding: 2">
<tr>
<td colspan="3" align="center"> A total of: <%=connDataList.size()%> records &nbsp; Each page shows 5 article &nbsp;
<a href="javascript:void(0);"
onclick="page.firstPage();return false;"> Home page </a> <a
href="javascript:void(0);" onclick="page.prePage();return false;"> on 1 page </a>
<a href="javascript:void(0);"
onclick="page.nextPage();return false;"> Under the 1 page </a> <a
href="javascript:void(0);" onclick="page.lastPage();return false;"> back </a>
<span id="pageindex"></span>
</td>
</tr>
</table>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.