SoFunction
Updated on 2025-03-01

Specific implementation of Javascript table page turn effect


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Table page turn---</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 = 24;//Total number of records
var pageTotal = ((count+record-1)/record)|0;//Total number of pages
var pagenum = 1;//The page number to be displayed


Cookie = {
Set : function (){
var name = arguments[0], value = escape(arguments[1]), days = 365, path = "/";
if( > 2) days = arguments[2];
if( > 3) path = arguments[3];
with(new Date()){
setDate(getDate()+days);
days=toUTCString();
}
= "{0}={1};expires={2};path={3}".format(name, value, days, path);
},
Get : function (){
var returnValue=(new RegExp("[\b\^;]?" + arguments[0] + "=([^;]*)(?=;|\b|$)","i"));
return returnValue?unescape(returnValue[1]):returnValue;
}
}
= function(){
var tmpStr = this;
var iLen = ;
for(var i=0;i<iLen;i++){
tmpStr = (new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmpStr;
}
function setPagenum(){// Organize cookies
pagenum = ("pagenum");
if(pagenum=="" || pagenum<1){
pagenum=1;
}
}

setPagenum();

//Reorganize the current page number. If the page is less than 1, then assign the value to 1. If it is greater than the total number of pages, it is equal to the total number of pages.
coordinatePagenum(pagenum);

//Get the number of the first record in the current page number based on the currently displayed page number
var pageBegin = (record*(pagenum-1)+1)|0;

//Get the number of the last record in the current page number based on the currently displayed page number
var pageEnd = record*pagenum;

function showhiddenRecord(pagenum){
=pagenum;
if(pagenum<=1){
="Page 1";
="Previous page";
}else{
="<a href=\"javascript:firstPage()\">Page 1</a>";
="<a href=\"javascript:prePage()\">PrePage</a>";
}
if(pagenum>=pageTotal){
="Next Page";
="Last Page";
}else{
="<a href=\"javascript:nextPage()\">Next Page</a>";
="<a href=\"javascript:lastPage()\">Last Page</a>";
}
('goto').value=pagenum;
//Get the number of the first record in the current page number based on the currently displayed page number
pageBegin = (record*(pagenum-1)+1)|0;

//Get the number of the last record in the current page number based on the currently displayed page number
pageEnd = record*pagenum;
for(var i=1;i<=count;i++){
if(i>=pageBegin && i<=pageEnd){
[i].="";
}else{
[i].="none";
}
}
("pagenum", pagenum);
}

function firstPage(){
pagenum=1;
showhiddenRecord(pagenum);
}

function lastPage(){
showhiddenRecord(pageTotal);
}

//Reorganize the current page number. If the page is less than 1, then assign the value to 1. If it is greater than the total number of pages, it is equal to the total number of pages.
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>
6 pages in total Current page <span >1</span>
<span ><a href="javascript:firstPage()">Page 1</a></span>
<span ><a href="javascript:prePage()">Previous page</a></span>
<span ><a href="javascript:nextPage()">Next Page</a></span>
<span ><a href="javascript:lastPage()">Last Page</a></span>
Go to <select onChange="gotoPage()" 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 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>