Home > Developer > JavaScript
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> flip the table </TITLE> <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; // The number of records displayed on each page var count = 24; // The total number of records var pageTotal = (count + record-1)/record) | 0; // total page number var pagenum = 1; // page number to be displayed Cookie = {Set: function () {var name = arguments [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 ();} documen T. cookie = "{0 }={ 1}; expires = {2}; path = {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 () {// organize Cookie pagenum = Cookie. get ("pagenum"); if (pagenum = "" | pagenum <1) {pagenum = 1 ;}} setPagenum (); // refresh the current page number, if the page is less than 1, the value is 1. If the page is greater than the total page number, the value is equal to the total page number coordinatePagenum (pagenum ); // obtain the number of the first record in the current face based on the current page number to be displayed var pageBegin = (record * (pagenum-1) + 1) | 0; // obtain the number of the last record in the current area based on the current page number to be displayed. var pageEnd = record * pagenum; function showhiddenRecord (pagenum) {number. innerHTML = pagenum; if (pagenum <= 1) {theFirstPage. innerHTML = "Page 1"; thePrePage. innerHTML = "Previous Page";} else {theFirstPage. innerHTML = "Page 1"; 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; // obtain the number pageBegin = (record * (pagenum-1) + 1) for the first record in the current area based on the current page number to be displayed | 0; // obtain the number pageEnd = record * pagenum; for (var I = 1; I <= count; I ++) of the last record on the current page based on the current page number to be displayed) {if (I> = pageBegin & I <= pageEnd) {mytable. rows [I]. style. display = "";} else {mytable. rows [I]. style. display = "none" ;}} Cookie. set ("pagenum", pagenum);} function firstPage () {pagenum = 1; showhiddenRecord (pagenum);} function lastPage () {showhiddenRecord (pageTotal );} // refresh the current page number. if the page is smaller than 1, the value is 1. if the page number is greater than the total page number, the value is equal to the total page number 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) {callback (pagenum ); showhiddenRecord (num);} // --> SCRIPT </HEAD> <BODY onLoad = "showhiddenRecord (pagenum) "> <center> six pages: Current 1st page, first page, Previous Page, last page, to <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>/ center> <TABLE id = "mytable" 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 select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
