Javascript表格翻頁(yè)效果的具體實(shí)現(xiàn)
更新時(shí)間：2013年10月05日 17:35:26 作者：
表格翻頁(yè)的實(shí)現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁(yè)效果的具體實(shí)現(xiàn)，感興趣的朋友可不要錯(cuò)過(guò)
表格翻頁(yè)的實(shí)現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁(yè)效果的具體實(shí)現(xiàn)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>表格翻頁(yè)---www.dhdzp.com</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>
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>表格翻頁(yè)---www.dhdzp.com</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>
相關(guān)文章
js實(shí)現(xiàn)計(jì)時(shí)器秒表功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)時(shí)器秒表功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
文章實(shí)現(xiàn)的div拖拽程序可以根據(jù)按鈕來(lái)控制是要種拖拽方式與位置 ，下面希望有需要的朋友可參考2014-01-01
本文主要介紹了js的offsetleft屬性的用法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
詳解Webpack loader 之 file-loader
這篇文章主要介紹了詳解Webpack loader 之 file-loader，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
深入學(xué)習(xí)JavaScript中的promise
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的promise，Promise對(duì)象的主要?途是通過(guò)鏈?zhǔn)秸{(diào)?的結(jié)構(gòu)，將原本回調(diào)嵌套的異步處理流程，轉(zhuǎn)化成“對(duì)象.then().then()...”的鏈?zhǔn)浇Y(jié)構(gòu)2022-06-06
javascript:history.go()和History.back()的區(qū)別及應(yīng)用
為提高用戶體驗(yàn)度，可能會(huì)使用到刷新 前進(jìn) 后退等相關(guān)更能，本文將以此問(wèn)題詳細(xì)介紹javascript:history.go()和History.back()的區(qū)別及應(yīng)用，需要的朋友可以參考下2012-11-11
小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁(yè)面
由于小程序跳轉(zhuǎn)的對(duì)象比較多,各自的規(guī)則又不一樣,因此小程序跳轉(zhuǎn)外部鏈接是用戶咨詢較多的問(wèn)題之一,下面這篇文章主要給大家介紹了關(guān)于小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁(yè)面的相關(guān)資料,需要的朋友可以參考下2022-09-09
js強(qiáng)制把網(wǎng)址設(shè)為默認(rèn)首頁(yè)
有時(shí)候你會(huì)發(fā)現(xiàn)設(shè)首頁(yè)為失效，那么來(lái)一個(gè)js強(qiáng)制設(shè)置首頁(yè)的代碼，不過(guò)為了綠色上網(wǎng)，盡量不要強(qiáng)迫你的用戶意志，弄不好網(wǎng)站用戶體驗(yàn)會(huì)降低。感興趣的小伙伴可以參考一下2015-09-09
對(duì)于不同類型的需要重復(fù)計(jì)算的問(wèn)題，循環(huán)和遞歸兩種方法各有所長(zhǎng)，能給出更直觀簡(jiǎn)單的方案，下面為大家詳細(xì)的介紹下JavaScript的遞歸與循環(huán)，感興趣的朋友可以了解下2013-08-08
js 三級(jí)關(guān)聯(lián)菜單效果實(shí)例
這篇文章介紹了js 三級(jí)關(guān)聯(lián)菜單效果，有需要的朋友可以參考一下2013-08-08