The examples in this article describe how JavaScript paging is implemented. Share to everyone for your reference. The implementation method is as follows:
<script>//define page as global variable to use var page below; 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 the ID page of the initialization table and tbody = new page (5, ' table ', ' Stbodyid ');
Initial load Init method page.__init__ ();
Initial update Form page.__updatetablerows__ (); All of the following methods are written to window.onload, otherwise run problematic function Page (Iabsolute, Stableid, Stbodyid) {//per page to display the number of data This.absolute =
Iabsolute;
This.tableid = Stableid;
This.tbodyid = Stbodyid; This.rowcount = 0;//record number This.pagecount = 0;//pages This.pageindex = 0;//page Index this.__otable__ = null;//table Reference this.__oTBody__ = n
ull;//to page content this.__datarows__ = 0;//record row reference this.__oldtbody__ = null;
}//Initialize page.prototype.__init__ = function () {//Get table reference this.__otable__ = document.getElementById (This.tableid);Get tbody Reference this.__otbody__ = This.__otable__.tbodies[this.tbodyid];
Gets the row this.__datarows__ = This.__otbody__.rows of the tbody;
Gets the total number of tbody this.rowcount = this.__datarows__.length;
try {//judge the number of data bars that are displayed per page when initialized, if the defined value is <0 or the defined value > the number of rows that are in the original, then the original number of rows is displayed, otherwise the number of rows currently defined is This.absolute = (this.absolute <= 0) || (This.absolute > This.rowcount)?
This.rowCount:this.absolute; Defines how many pages of data should be displayed when initializing, 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) {}}//next page Page.prototype.nextPage = function () {if (This.pageindex + 1 < this.pagecount) {This
. pageIndex + 1;
This.__updatetablerows__ (); }//Previous page Page.prototype.prePage = function () {if (This.pageindex >= 1) {this.pageindex = 1; this.__updatetablerows_
_(); ///Home Page.prototype.firstPage = function () {if (this.pageindex!= 0) {this.pageindex = 0; this.__updatetablerows__ ()
; }//Last 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.PA
geCount-1;
else if (Ipageindex < 0) {This.pageindex = 0;} else {this.pageindex = Ipageindex;} this.__updatetablerows__ (); When paging is performed, update displays table contents page.prototype.__updatetablerows__ = function () {//pageindex for 0//per page when initialized * index var for the current page
Icurrentrowcount = This.absolute * THIS.PAGEINDEX; If all data on the current page + data > Total number of data per page display, you will also need to display this.absolute+ icurrentrowcount-this.rowcount these data, otherwise, display 0 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);
Remove the tbody from the table var removedtbody = This.__otable__.removechild (this.__otbody__);
Re-create tbody var newtbody = document.createelement ("tbody"); Assign him an ID value forThe original ID value Newtbody.setattribute ("id", This.tbodyid); for (var i = Icurrentrowcount i < This.absolute + Icurrentrowcount-imorerow; i++) {//Re-add node to body Newtbody.appendchi
LD (Temprows[i]);
///Add the newly created tbody to the table This.__otable__.appendchild (newtbody);
/* This.datarows is a reference to This.otbody, remove this.otbody then this.datarows reference will be lost, code:this.dataRows = temprows, restore the original action rowset.
* * this.__datarows__ = temprows;
this.__otbody__ = Newtbody; ///Clone the original ACTION rowset page.prototype.__clonerows__ = function () {var temprows = []; clone all nodes in the current body and their child nodes for (var i = 0; I & Lt This.__datarows__.length;
i++) {Temprows[i] = This.__datarows__[i].clonenode (1);} return temprows; </script>
The
wants this article to help you with your JavaScript programming.