How to Implement the JavaScript paging function _ javascript tips-js tutorial

This article mainly introduces the implementation of the JavaScript paging function, and involves the javascript paging operation related skills. If you need it, you can refer to the example below to illustrate the implementation of the JavaScript paging function. Share it with you for your reference. The specific implementation method is as follows:

Script // defines page as a global variable so that var page; window can be used below. 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 idpage that initializes the table and tbody = ne W Page (5, 'table', 'stbodyid'); // initially load the init method page. _ init _ (); // update Table page initially. _ updateTableRows _ ();} // all the methods below are written to window. in addition to onload, otherwise the function Page (iAbsolute, sTableId, sTBodyId) is faulty. {// The number of data entries displayed on each Page. this. absolute = iAbsolute; this. tableId = sTableId; this. tBodyId = sTBodyId; this. rowCount = 0; // number of records this. pageCount = 0; // page number this. pageIndex = 0; // page index this. _ oTable _ = null; // Table reference this. _ oTBody _ = null; // the content to be paged this. _ d AtaRows _ = 0; // record row Reference this. _ oldTBody _ = null;} // initialize the Page. prototype. _ init _ = function () {// obtain table reference this. _ oTable _ = document. getElementById (this. tableId); // obtain the tBody reference this. _ oTBody _ = this. _ oTable __. tBodies [this. tBodyId]; // get the tbody row this. _ dataRows _ = this. _ oTBody __. rows; // obtain the total number of rows of the tbody. this. rowCount = this. _ dataRows __. length; try {// determine the number of data entries displayed on each page during initialization. If the defined value is <0 or the defined value> the original number of rows, the original number of rows is displayed during initialization, otherwise, the number of defined rows is This. absolute = (this. absolute <= 0) | (this. absolute> this. rowCount )? This. rowCount: this. absolute; // defines the number of data pages displayed during initialization, that is, the total number of data pages. this. pageCount = parseInt (this. rowCount % this. absolute = 0? This. rowCount/this. absolute: this. rowCount/this. absolute + 1);} catch (exception) {}} // next Page. prototype. nextPage = function () {if (this. pageIndex + 1 <this. pageCount) {this. pageIndex + = 1; this. _ updateTableRows _ () ;}// Previous Page. prototype. prePage = function () {if (this. pageIndex> = 1) {this. pageIndex-= 1; this. _ updateTableRows _ () ;}// homepage Page. prototype. firstPage = function () {if (this. pageIndex! = 0) {this. pageIndex = 0; this. _ updateTableRows _ () ;}// the last Page. prototype. lastPage = function () {if (this. pageIndex + 1! = This. pageCount) {this. pageIndex = this. pageCount-1; this. _ updateTableRows _ () ;}// Page locating 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 the Page is executed, the Page of the table content is updated. prototype. _ updateTableRows _ = function () {// The beginning of pageIndex 0 at the beginning // data displayed on each page * index var iCurrentRowCount of the current page = this. absolute * this. pageIndex; // if all data on the current page + data displayed on each page> total number of data entries, this is also required. absolute + iCurrentRowCount-this. rowCount. Otherwise, 0 data entries are displayed. 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 _); // recreate tbodyvar newTBody = document. createElement ("TBODY"); // assign an id value to the original id value newTBody. setAttribute ("id", this. tBodyId); for (var I = iCurrentRowCount; I <this. absolute + iCurrentRowCount-iMoreRow; I ++) {// Add the node newTBody to the body. appendChild (tempRows [I]);} // Add the newly created tbody to the table. this. _ oTable __. appendChild (newTBody);/* this. dataRows is this. remove this. oTBody so this. dataRows reference will be sold out, code: this. dataRows = tempRows; restores the set of original operation rows. */this. _ dataRows _ = tempRows; this. _ oTBody _ = newTBody;} // clone the Page of the original operation row. prototype. _ cloneRows _ = function () {var tempRows = []; // All nodes in the current body and their subnodes are X-forwarded for (var I = 0; I <this. _ dataRows __. length; I ++) {tempRows [I] = this. _ dataRows _ [I]. cloneNode (1);} return tempRows;} script
 
 
 

  
  
 
   
 
    
Total: <% = connDataList. size () %> records are displayed on each page.
 
   
 
  
 
 

I hope this article will help you design javascript programs.