ホームページ >ウェブフロントエンド >jsチュートリアル >发一个分页的js_javascript技巧

发一个分页的js_javascript技巧

WBOYオリジナル: 2016-05-16 19:24:13850ブラウズ

<script language="JavaScript"> 
<!-- 
var ETNGpager = function( srcName, dstName, cntPP, cntPS ) 
{ 
        this.srcName    = srcName; 
        this.dstName    = dstName; 
        this.curP        = 1;//默认当前页为第一页 
        this.cntPP        = cntPP || 2;//默认每页两条纪录 
        this.cntPS        = cntPS || 3;//默认每页显示5个分页上下文 
        this.items        = []; 
        this.showPNP    = true;/*显示上下页链接*/ 
        this.showType    = true;/*滑动分页*/ 
        this.result        = {pagedata:[],pagebar:'',limit:[0,0],report:''}; 
        this.parse();/*总纪录数*/ 
} 
ETNGpager.prototype.page = function (){ 
    this.cntP    = Math.ceil(this.cntR/this.cntPP);/*总页数*/ 
    this.cntS    = Math.ceil(this.cntP/this.cntPS);/*总段数*/ 
    this.curS    = Math.ceil(this.curP/this.cntPS);/*当前段*/ 
    this.preP    = this.curP -1;/*上一页*/ 
    this.nextP    = this.curP +1;/*下一页*/ 
    this.preS    = this.curS -1;/*上一段*/ 
    this.nextS    = this.curS +1;/*下一段*/ 
    this.startR    = (this.curP -1)*this.cntPP + 1;/*起始纪录*/ 
    this.endR    = (this.curP*this.cntPP >this.cntR)?this.cntR:this.curP*this.cntPP;/*结束纪录*/ 
    this.result['pagedata']=[]; 
    if(this.showType){ 
        this.perSide    = Math.floor(this.cntPS/2); 
        this.startP        = (this.curP > this.perSide)?(this.curP - this.perSide):1; 
        this.endP        = (this.startP + this.cntPS)>this.cntP?this.cntP:(this.startP + this.cntPS); 
    }else{ 
        this.startP        = (this.curS-1)*this.cntPS+1; 
        this.endP        = (this.curS*this.cntPS>this.cntP)?this.cntP:(this.curS*this.cntPS); 
    } 
    for(var i = this.startP;i<=this.endP;i++){ 
        this.result['pagedata'].push((i==this.curP)?'<span class="curPage">'+i+'':'<span onclick="page('+i+')">'+i+''); 
    } 
    if(this.showPNP){ 
        if(this.curP>1)this.result['pagedata'].unshift('<span onclick="page('+(this.curP-1)+')">上一页'); 
        if(this.curP<this.cntP)this.result['pagedata'].push('<span onclick="page('+(this.curP+1)+')">下一页'); 
    } 
    this.result['pagebar']    = this.result['pagedata'].join('  '); 
    this.result['limit']    = [this.startR,this.endR]; 
    this.result['report']    = '共'+this.cntR+'条,当前页'+this.startR+'-'+this.endR+','+this.curP+'/'+this.cntP+'页';

} 
ETNGpager.prototype.parse = function (){ 
    var obj = document.getElementById(this.srcName); 
    for(var i = 0;i<obj.childNodes.length;i++){ 
        if(obj.childNodes[i].nodeType!=3)this.items[this.items.length]=obj.childNodes[i].innerHTML; 
    } 
    this.cntR = this.items.length; 
    return this.items.length; 
} 
ETNGpager.prototype.create=function(){ 
    this.page(); 
    document.getElementById(this.dstName).innerHTML='<li>'+this.items.slice(this.startR-1,this.endR).join('<li>')+''; 
    document.getElementById(this.dstName).innerHTML+='<span class="ctrlPages">'+this.result['pagebar']+this.result['report']+''; 
} 
//--> 
</script> 
 
 
<ul id="listcontent" style="display:none;"> 
  <li><a href="http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml" target="_blank">支付宝与六大代理签订协议 </a></li> 
  <li><a href="http://forum.taobao.com/showThread.htm?thread=3123988&forum=14" target="_blank">刷卡积分可网上购物 </a></li> 
  <li><a href="/alipay/news/sample/23492.htm" target="_blank">支付宝为网店保驾护航 </a></li> 
  <li><a href="http://it.people.com.cn/GB/8219/50656/52310/3822563.html" target="_blank">支付宝红包送来红地毯 </a></li> 
  <li><a href="/alipay/news/sample/22701.htm" target="_blank">紧急天气预报"红色风暴"空降支付宝 </a></li> 
  <li><a href="/alipay/news/sample/22699.htm" target="_blank">小红包背后大名堂 </a></li> 
  <li><a href="http://www.q88.net/SHOP_2005A/zfb.aspx" target="_blank">Q88.net全面无缝接合支付宝 </a></li> 
  <li><a href="/alipay/news/sample/21529.htm" target="_blank">电子支付规范走出第一步 使用专业版受鼓励 </a></li> 
  <li><a href="/alipay/news/sample/19786.htm" target="_blank">从支付宝看电子商务的发展 </a></li> 
  <li><a href="/alipay/news/sample/19784.htm" target="_blank">谁能与支付宝PK？ </a></li> 
  <li><a href="/alipay/news/sample/19618.htm" target="_blank">国内第一家引入支付宝的网络图库正式开通 </a></li> 
  <li><a href="/alipay/news/sample/19475.htm" target="_blank">新浪网：中关村在线加入支付宝联盟 </a></li> 
  <li><a href="/alipay/news/sample/19471.htm" target="_blank">千家网店加入支付宝联盟 </a></li> 
  <li><a href="/alipay/news/sample/18549.htm" target="_blank">我与支付宝的分分秒秒 </a></li> 
  <li><a href="/alipay/news/sample/18207.htm" target="_blank">支付宝—放心"网宝"的理由 </a></li> 
  <li><a href="/alipay/news/sample/17944.htm" target="_blank">欧飞数卡携手支付宝,再创新高 </a></li> 
  <li><a href="/alipay/news/sample/17803.htm" target="_blank">莎莎香水网:支付宝助我完成销售计划 </a></li> 
  <li><a href="/alipay/news/sample/17801.htm" target="_blank">使用支付宝:一个月交易额翻5倍 </a></li> 
  <li><a href="/alipay/news/sample/17799.htm" target="_blank">支付宝：一个普通站长的自述 </a></li> 
  <li><a href="/alipay/news/sample/17797.htm" target="_blank">新开网店如何日交易额达8000元？ </a></li> 
  <li><a href="/alipay/news/sample/17563.htm" target="_blank">名大数码：网店月交易额如何突破30万 </a></li> 
  <li><a href="http://it.sohu.com/20050916/n240400443.shtml" target="_blank">中国卡网结盟支付宝创交易量周增长新高 </a></li> 
  <li><a href="http://it.people.com.cn/GB/42891/42894/3676101.html" target="_blank">支付宝联盟与合作伙伴合作在人民网推广 </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---103546-.htm" target="_blank">网络银行使用全攻略---足不出户查看汇款明细 </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---1561087-.htm" target="_blank">"支付宝购物体验"征文-----贿赂 </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---2102458-.htm" target="_blank">卖家谈：谁是支付宝最终的获利者？ </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---1617047-.htm" target="_blank">淘宝两钻卖家感悟支付宝 </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---1686484-.htm" target="_blank">支付宝"即时到帐交易"的使用经验及建议 </a></li> 
  <li><a href="http://forum.taobao.com/show_thread-50---1794216-.htm" target="_blank">我的第一笔网上交易 </a></li> 
</ul> 
<ul id="listcontent2">列表信息加载中，请您稍等……</ul> 
<script language="JavaScript"> 
<!-- 
var pager = new ETNGpager('listcontent','listcontent2',10,5); 
var curP = 1; 
showtime = setInterval("page()", 5000); 
function page(i){ 
    curP =(curP>pager.cntP)?1:curP; 
    if(i){ 
        curP = n =i; 
    }else{ 
        n = curP++; 
    } 
    pager.curP = (n>pager.cntP)?pager.cntP:n; 
    pager.create(); 
}

//--> 
</script>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：取得父标签_基础知识次の記事：云网广告中的代码，提示出错，大家找找_广告代码

続きを見る

发一个分页的js_javascript技巧

関連記事