JavaScript table paging effect and code _JAVASCRIPT skills

Source: Internet
Author: User
Tags goto prev
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> Page Page </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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.