Implementation of the JavaScript paging Function

Implementation of the JavaScript paging Function

Implementation of the JavaScript paging Function

This article mainly introduces the implementation of the JavaScript paging function, and involves the javascript paging operation related skills. For more information, see

 

 

This article describes how to implement the JavaScript paging function. Share it with you for your reference. The specific implementation method is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156

<Script> // Define page as a global variable so that 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 "); // Define the number of pages per page and the id of the initialized table and tbody Page = new Page (5, 'table', 'stbodyid '); // Initially load the init Method Page. _ init __(); // Initial update table Page. _ updateTableRows __(); } // All the methods below are written out of window. onload; otherwise, the operation may fail. Function Page (iAbsolute, sTableId, sTBodyId ){ // Number of data entries per page This. absolute = iAbsolute; This. tableId = sTableId; This. tBodyId = sTBodyId; This. rowCount = 0; // number of records This. pageCount = 0; // Number of pages This. pageIndex = 0; // page index This. _ oTable _ = null; // Table reference This. _ oTBody _ = null; // the content to be paged This. _ dataRows _ = 0; // record row Reference This. _ oldTBody _ = null; } // Initialization Page. prototype. _ init _ = function (){ // Obtain table reference This. _ oTable _ = document. getElementById (this. tableId ); // Obtain the tBody reference This. _ oTBody _ = this. _ oTable _. tBodies [this. tBodyId]; // Obtain the tbody row This. _ dataRows _ = this. _ oTBody _. rows; // Obtain the total number of tbody rows 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 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 __(); } } // Homepage Page. prototype. firstPage = function (){ If (this. pageIndex! = 0 ){ This. pageIndex = 0; This. _ updateTableRows __(); } }   // Last page 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 __(); } // Update the display table content when the page is executed Page. prototype. _ updateTableRows _ = function (){ // When pageIndex is initialized, It is 0. // Data displayed on each page * index of the current page Var iCurrentRowCount = this. absolute * this. pageIndex; // If all data as of the current page + data displayed on each page> the total number of data entries, you must also display this. 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 the tbody Var newTBody = document. createElement ("TBODY "); // Assign an id value to him, which is the original id value. NewTBody. setAttribute ("id", this. tBodyId ); For (var I = iCurrentRowCount; I <this. absolute + iCurrentRowCount -IMoreRow; I ++ ){ // Add a node to the body again NewTBody. appendChild (tempRows [I]); } // Add the newly created tbody to the table This. _ oTable _. appendChild (newTBody ); /* This. dataRows is a reference of this. oTBody, If this. oTBody is removed, this. dataRows reference will be sold out, Code: this. dataRows = tempRows; restore the set of original operation rows. */ This. _ dataRows _ = tempRows; This. _ oTBody _ = newTBody; } // Clone the original operation row set Page. prototype. _ cloneRows _ = function (){ Var tempRows = []; // Clone all nodes and Their subnodes in the current body For (var I = 0; I <this. _ dataRows _. length; I ++ ){ TempRows [I] = this. _ dataRows _ [I]. cloneNode (1 ); } Return tempRows; } </Script> </Head> <Body> <! -- Here is a table with random content for paging --> <Table width = "100%" cellpadding = "0" cellspacing = "0" border = "1" Style = "padding: 2"> <Tr> <Td colspan = "3" align = "center"> total: <% = connDataList. size () %> 5 records per page <A href = "javascript: void (0 );" Onclick = "page. firstPage (); return false;"> homepage </a> < Href = "javascript: void (0);" onclick = "page. prePage (); return false;"> previous page </a> <A href = "javascript: void (0 );" Onclick = "page. nextPage (); return false;"> next page </a> < Href = "javascript: void (0);" onclick = "page. lastPage (); return false;"> last page </a> <Span id = "pageindex"> </span> </Td> </Tr> </Table> </Body> </Html>

I hope this article will help you design javascript programs.