<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> Table Paging </TITLE&G T <style> body, td{font-size:9pt; } a:link {color: #FF0000; } a:visited {color: #FF0000; } a:hover {color: #006600; } </style> <script language= "JavaScript" > <!--var record = 4;//How many records are displayed per page var count = 24;//Total records var p Agetotal = ((count+record-1)/record) |0;//Total pages var pagenum = 1;//The page number Cookie that will be displayed = {set:function () {var name = AR Guments[0], value = Escape (Arguments[1]), days = 365, Path = "/"; if (Arguments.length > 2) days = arguments[2]; if (Arguments.length > 3) path = arguments[3]; With (new Date ()) {setdate (GetDate () +days); Days=toutcstring (); } Document.cookie = "{0}={1};expires={2};p ath={3}". Format (name, value, days, path); }, Get:function () {var returnvalue=document.cookie.match (new RegExp ("[\b\^;]?" + arguments[0] + "= ([^;] *) (? =;|\b|$) "," I ");Return Returnvalue?unescape (Returnvalue[1]): returnvalue; } String.prototype.format = function () {var tmpstr = this; var ilen = arguments.length; for (Var i=0;i<ilen;i++) {tmpstr = Tmpstr.replace (New RegExp ("\\{" + i + "\}", "G"), arguments[i]); return tmpstr; function Setpagenum () {//defragment Cookie Pagenum = Cookie.get ("Pagenum"); if (pagenum== "" | | | pagenum<1) {pagenum=1; } setpagenum (); Rearrange the current page number, and if the page is less than 1, the assignment is 1, or the total page coordinatepagenum (pagenum) if it is greater than the total page size; Gets the number of the first record in the current face based on the page number currently being displayed var Pagebegin = (record* (pagenum-1) +1) | Gets the number of the last record in the current face based on the page number currently being displayed var pageend = Record*pagenum; function Showhiddenrecord (pagenum) {number.innerhtml=pagenum; if (pagenum<=1) {thefirstpage.innerhtml= "first page"; Theprepage.innerhtml= "Previous page"; }else{thefirstpage.innerhtml= "First page"; Theprepage.innerhtml= "Previous page"; } if (pagenum>=pagetotal) {thenextpage.innerhtml= ' next page '; Thelastpage.innerhtml= "last Page"; }else{thenextpage.innerhtml= "Next page"; Thelastpage.innerhtml= "last Page"; } document.getElementById (' Goto '). Value=pagenum; Gets the number of the first record in the current face based on the page number currently being displayed Pagebegin = (record* (pagenum-1) +1) | Gets the number of the last record in the current face based on the page number currently being displayed pageend = Record*pagenum; for (Var i=1;i<=count;i++) {if (I>=pagebegin && i<=pageend) {Mytable.rows[i].style.di Splay= ""; }else{mytable.rows[i].style.display= "None"; } cookie.set ("Pagenum", pagenum); function FirstPage () {pagenum=1; Showhiddenrecord (Pagenum); function LastPage () {Showhiddenrecord (pagetotal); //Rearrange the current page number, if the page is less than 1, then the assignment is 1, if greater than the total pages, the total page function coordinatepagenum (num) {if (num<1) {num= "1"; }else if (num>pagetotal) {num=pagetotal; }} function Prepage () {pagenum--; Coordinatepagenum (Pagenum); Showhiddenrecord (PAgenum); function NextPage () {pagenum++; Coordinatepagenum (Pagenum); Showhiddenrecord (Pagenum); function GotoPage (num) {coordinatepagenum (pagenum); Showhiddenrecord (num); //--> </SCRIPT> </HEAD> <body onload= "Showhiddenrecord (pagenum)" > <center> Total 6 page Current Cap & Lt;span id= "number" >1</span> page <span id= "thefirstpage" > First page </span> <span id= "Theprepage" > Prev </span> <span id= "Thenextpage" > Next </span> <span id= "thelastpage" > last page </span> turn to page <select onchange= "GotoPage (this.value)" Name= "goto" > <option value=1>1</option> <option, value=2 >2</option> <option value=3>3</option> <option value=4>4</option> <option value= 5>5</option> <option value=6>6</option> </select> page </center> <table id= "Myta Ble "cellpadding=4 cellspacing=1 border=0 bgcolor= #999999 width=500 align=center> <tr bgcolor= #ffffff ><TD> title </TD></TR> <tr bgcolor= #ffffff ><td>1</td ></TR> <tr bgcolor= #ffffff ><TD>2</TD></TR> <tr bgcolor= #ffffff ><td>3 </TD></TR> <tr bgcolor= #ffffff ><TD>4</TD></TR> <tr bgcolor= #ffffff >< td>5</td></tr> <tr bgcolor= #ffffff ><TD>6</TD></TR> <tr bgcolor= #ffffff ><TD>7</TD></TR> <tr bgcolor= #ffffff ><TD>8</TD></TR> <tr bgcolor=# ffffff><td>9</td></tr> <tr bgcolor= #ffffff ><TD>10</TD></TR> <tr bgcolor= #ffffff ><TD>11</TD></TR> <tr bgcolor= #ffffff ><td>12</td></tr > <tr bgcolor= #ffffff ><TD>13</TD></TR> <tr bgcolor= #ffffff ><td>14</td ></TR> <tr bgcolor= #ffffff ><TD>15</TD></TR> <tr BGColor= #ffffff ><TD>16</TD></TR> <tr bgcolor= #ffffff ><TD>17</TD></TR> <tr bgcolor= #ffffff ><TD>18</TD></TR> <tr bgcolor= #ffffff ><TD>19</TD> </TR> <tr bgcolor= #ffffff ><TD>20</TD></TR> <tr bgcolor= #ffffff ><td>21 </TD></TR> <tr bgcolor= #ffffff ><TD>22</TD></TR> <tr bgcolor= #ffffff >< td>23</td></tr> <tr bgcolor= #ffffff ><TD>24</TD></TR> </TABLE> </ Body> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
