How to implement JavaScript paging function _javascript skills

Source: Internet
Author: User
Tags rowcount

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.