JS實(shí)現(xiàn)php的偽分頁(yè)
更新時(shí)間:2008年05月25日 20:25:56 作者:
假如某一個(gè)頁(yè)面的數(shù)據(jù)很多,不方便全都顯示出來(lái),而且假設(shè)里面有個(gè)播放器,不希望在翻頁(yè)的時(shí)候播放器會(huì)終止的話,就可以采用這個(gè)方法盡管可以用Ajax,但是在數(shù)據(jù)比較少的情況下,這個(gè)方法更有優(yōu)勢(shì)
JS代碼如下:
<scrīpt language="javascrīpt">
//最大數(shù)據(jù)量
var total="100";
//每頁(yè)的顯示量
var pagesize=10;
//一共有多少頁(yè)
var pagenum=Math.ceil(total/pagesize);
//生成導(dǎo)航
function initpage(nowpage){
var pagenav='<a href="#" ōnclick=up('+ nowpage+');>上一頁(yè)</a>';
for(i=1;i<=pagenum;i++){
pagenav += (i==nowpage)?'<span class="now">' + i + '</span>':'<a class="number" href="#" ōnclick=goToPage(' + i + ');>' + i + '</a> ';
}
pagenav += '<a href="#" ōnclick=down('+ nowpage+');>下一頁(yè)</a>';
document.getElementById('pages').innerHTML=pagenav;
}
//翻頁(yè)
function goToPage(page){
var start=(page-1)*pagesize;
var max=page*pagesize;
for(vs=0;vs<total;vs++){
var ōbj=document.getElementById('item_' + vs);
obj.style.display="none";
}
if(max>total)max=total;
for(v=start;v<max;v++){
var ōbj=document.getElementById('item_' + v);
obj.style.display="block";
}
initpage(page);
}
//上一頁(yè)
function up(nowpage){
if(nowpage==1)return false;
if(nowpage>1)goToPage((nowpage-1));
}
//下一頁(yè)
function down(nowpage){
if(nowpage==pagenum)return false;
if(nowpage<pagenum)goToPage((nowpage+1));
}
</scrīpt>
如果數(shù)據(jù)是
<li id="item_0" >.........</li>
<li id="item_1" >.........</li>
...........
<li id="item_100" >........</li>
那么就可以顯示出一個(gè)類似于這樣的導(dǎo)航:
上一頁(yè) 1 2 3 4 下一頁(yè)
然后點(diǎn)擊頁(yè)數(shù)或者上下頁(yè)就可以切換顯示了.
時(shí)間比較倉(cāng)促,就說(shuō)這么多了,大家自己分析代碼,有不明白的請(qǐng)留言
復(fù)制代碼 代碼如下:
<scrīpt language="javascrīpt">
//最大數(shù)據(jù)量
var total="100";
//每頁(yè)的顯示量
var pagesize=10;
//一共有多少頁(yè)
var pagenum=Math.ceil(total/pagesize);
//生成導(dǎo)航
function initpage(nowpage){
var pagenav='<a href="#" ōnclick=up('+ nowpage+');>上一頁(yè)</a>';
for(i=1;i<=pagenum;i++){
pagenav += (i==nowpage)?'<span class="now">' + i + '</span>':'<a class="number" href="#" ōnclick=goToPage(' + i + ');>' + i + '</a> ';
}
pagenav += '<a href="#" ōnclick=down('+ nowpage+');>下一頁(yè)</a>';
document.getElementById('pages').innerHTML=pagenav;
}
//翻頁(yè)
function goToPage(page){
var start=(page-1)*pagesize;
var max=page*pagesize;
for(vs=0;vs<total;vs++){
var ōbj=document.getElementById('item_' + vs);
obj.style.display="none";
}
if(max>total)max=total;
for(v=start;v<max;v++){
var ōbj=document.getElementById('item_' + v);
obj.style.display="block";
}
initpage(page);
}
//上一頁(yè)
function up(nowpage){
if(nowpage==1)return false;
if(nowpage>1)goToPage((nowpage-1));
}
//下一頁(yè)
function down(nowpage){
if(nowpage==pagenum)return false;
if(nowpage<pagenum)goToPage((nowpage+1));
}
</scrīpt>
如果數(shù)據(jù)是
<li id="item_0" >.........</li>
<li id="item_1" >.........</li>
...........
<li id="item_100" >........</li>
那么就可以顯示出一個(gè)類似于這樣的導(dǎo)航:
上一頁(yè) 1 2 3 4 下一頁(yè)
然后點(diǎn)擊頁(yè)數(shù)或者上下頁(yè)就可以切換顯示了.
時(shí)間比較倉(cāng)促,就說(shuō)這么多了,大家自己分析代碼,有不明白的請(qǐng)留言
相關(guān)文章
PHP定時(shí)執(zhí)行任務(wù)的3種方法詳解
PHP不支持多線程,有時(shí)候處理問(wèn)題不是那么方便,今天談?wù)撘幌翽HP定時(shí)執(zhí)行的方法,感興趣的小伙伴們可以參考一下2015-12-12深入探討:PHP使用數(shù)據(jù)庫(kù)永久連接方式操作MySQL的是與非
本篇文章是對(duì)PHP使用數(shù)據(jù)庫(kù)永久連接方式操作MySQL的是與非進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06在WordPress中使用wp_count_posts函數(shù)來(lái)統(tǒng)計(jì)文章數(shù)量
這篇文章主要介紹了在WordPress中使用wp_count_posts函數(shù)來(lái)統(tǒng)計(jì)文章數(shù)量的方法,同時(shí)也可以統(tǒng)計(jì)草稿及頁(yè)面的數(shù)量,相當(dāng)實(shí)用,需要的朋友可以參考下2016-01-01使用PHP訪問(wèn)RabbitMQ消息隊(duì)列的方法示例
這篇文章主要介紹了使用PHP訪問(wèn)RabbitMQ消息隊(duì)列的方法,結(jié)合實(shí)例形式分析了RabbitMQ消息隊(duì)列的相關(guān)擴(kuò)展安裝、隊(duì)列建立、隊(duì)列綁定、消息發(fā)送、消息接收等相關(guān)操作技巧,需要的朋友可以參考下2018-06-06淺析php過(guò)濾html字符串,防止SQL注入的方法
本篇文章是對(duì)php中過(guò)濾html字符串,防止SQL注入的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07簡(jiǎn)單了解將WordPress中的工具欄移到底部的小技巧
這篇文章主要介紹了將WordPress中的工具欄移到底部的小技巧,隨著新版的Chrome和WordPress的發(fā)布,文中最后提到的顯示問(wèn)題也應(yīng)當(dāng)能夠得到解決,需要的朋友可以參考下2015-12-12分析Composer實(shí)現(xiàn)自動(dòng)加載原理
一般在框架中都會(huì)用到composer工具, 用它來(lái)管理依賴。其中 composer有類的自動(dòng)加載機(jī)制,可以加載composer下載的庫(kù)中的所有的類文件。那么composer的自動(dòng)加載機(jī)制是怎么實(shí)現(xiàn)的呢?2021-05-05Linux下實(shí)現(xiàn)PHP多進(jìn)程的方法分享
PHP多進(jìn)程:使用PHP的Process Control Functions(PCNTL/線程控制函數(shù)),需要的朋友可以參考下2012-08-08