快捷導(dǎo)航

Javascript表格翻頁(yè)效果實(shí)現(xiàn)思路及代碼

更新時(shí)間：2013年08月23日 17:41:33 作者：

表格翻頁(yè)的實(shí)現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁(yè)效果的具體實(shí)現(xiàn)，感興趣的朋友可以參考下

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>表格翻頁(yè)</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;//每頁(yè)顯示多少條記錄 
var count = 24;//記錄總數(shù) 
var pageTotal = ((count+record-1)/record)|0;//總頁(yè)數(shù) 
var pagenum = 1;//將要顯示的頁(yè)碼 

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};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(){//整理Cookie 
pagenum = Cookie.Get("pagenum"); 
if(pagenum=="" || pagenum<1){ 
pagenum=1; 
} 
} 

setPagenum(); 

//重新整理當(dāng)前頁(yè)碼，如果頁(yè)面小于1，則賦值為1，如果大于總頁(yè)數(shù)，則等于總頁(yè)數(shù) 
coordinatePagenum(pagenum); 

//根據(jù)當(dāng)前要顯示的頁(yè)碼取得當(dāng)前面里第一條記錄的號(hào)碼 
var pageBegin = (record*(pagenum-1)+1)|0; 

//根據(jù)當(dāng)前要顯示的頁(yè)碼取得當(dāng)前面里最后一條記錄的號(hào)碼 
var pageEnd = record*pagenum; 

function showhiddenRecord(pagenum){ 
number.innerHTML=pagenum; 
if(pagenum<=1){ 
theFirstPage.innerHTML="第一頁(yè)"; 
thePrePage.innerHTML="上一頁(yè)"; 
}else{ 
theFirstPage.innerHTML="<a href=\"javascript:firstPage()\">第一頁(yè)</a>"; 
thePrePage.innerHTML="<a href=\"javascript:prePage()\">上一頁(yè)</a>"; 
} 
if(pagenum>=pageTotal){ 
theNextPage.innerHTML="下一頁(yè)"; 
theLastPage.innerHTML="最后一頁(yè)"; 
}else{ 
theNextPage.innerHTML="<a href=\"javascript:nextPage()\">下一頁(yè)</a>"; 
theLastPage.innerHTML="<a href=\"javascript:lastPage()\">最后一頁(yè)</a>"; 
} 
document.getElementById('goto').value=pagenum; 
//根據(jù)當(dāng)前要顯示的頁(yè)碼取得當(dāng)前面里第一條記錄的號(hào)碼 
pageBegin = (record*(pagenum-1)+1)|0; 

//根據(jù)當(dāng)前要顯示的頁(yè)碼取得當(dāng)前面里最后一條記錄的號(hào)碼 
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); 
} 

//重新整理當(dāng)前頁(yè)碼，如果頁(yè)面小于1，則賦值為1，如果大于總頁(yè)數(shù)，則等于總頁(yè)數(shù) 
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 頁(yè) 當(dāng)前第 <span id="number">1</span> 頁(yè) 
<span id="theFirstPage"><a href="javascript:firstPage()">第一頁(yè)</a></span> 
<span id="thePrePage"><a href="javascript:prePage()">上一頁(yè)</a></span> 
<span id="theNextPage"><a href="javascript:nextPage()">下一頁(yè)</a></span> 
<span id="theLastPage"><a href="javascript:lastPage()">最后一頁(yè)</a></span> 
轉(zhuǎn)到第<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>頁(yè) 
</center> 

<TABLE id="mytable" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center> 
<TR bgcolor=#ffffff><TD>標(biāo)題</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> 