Page page to achieve a lot of ways, the following to JS as an example for you to introduce the details of the table page effect of the specific implementation.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> Page---www.jb51.net</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;//How many records are displayed per page
var count = Total number of 24;//records
var pagetotal = ((count+record-1)/record) |0;//Total pages
var pagenum = 1;//The page number that will 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 ();
}
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 () {//Organize cookies
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, and if it is greater than the total pages, it is equal to the total page size
Coordinatepagenum (Pagenum);
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= "<a href=\" Javascript:firstpage () "> First page </a>";
Theprepage.innerhtml= "<a href=\" javascript:prepage () \ > Prev </a>;
}
if (pagenum>=pagetotal) {
Thenextpage.innerhtml= "Next page";
Thelastpage.innerhtml= "last Page";
}else{
Thenextpage.innerhtml= "<a href=\" Javascript:nextpage () "> Next </a>";
Thelastpage.innerhtml= "<a href=\" javascript:lastpage () \ "> Last page </a>";
}
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.display= "";
}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, and if the page is less than 1, the assignment is 1, and if it is greater than the total pages, it is equal to the total page size
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 <span id= "number" >1</span> page
<span id= "Thefirstpage" ><a href= "Javascript:firstpage ()" > first page </a></span>
<span id= "Theprepage" ><a href= "Javascript:prepage ()" > Prev </a></span>
<span id= "Thenextpage" ><a href= "Javascript:nextpage ()" > Next </a></span>
<span id= "Thelastpage" ><a href= "Javascript:lastpage ()" > last page </a></span>
Go 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> page
</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>