欢迎访问钢琴花园：www.pianohl.com
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>帝国cms使用灵动标签调用文章列表并使用JAVASCRIPT分页</title> 
  6. <script src="css/page.js" type="text/javascript"></script> 
  7. </head> 
  8.   
  9. <body> 
  10. <div class="content"> 
  11.     <ul id="list" style="display:none;"> 
  12.         [e:loop={'SELECT newstime , titleurl , title , smalltext FROM phome_ecms_news',0,24,0}] 
  13.         <?  
  14.         $monthArr = array("01"=>"Jan.","02"=>"Feb.","03"=>"Mar.","04"=>"Apr.","05"=>"May.","06"=>"Jun.","07"=>"July.","08"=>"Aug.","09"=>"Sept.","10"=>"Oct.","11"=>"Nov.","12"=>"Dec."); 
  15.         $mtime = date("m",$bqr[newstime]);  
  16.         ?> 
  17.         <li> 
  18.         <a href="<?=$bqsr[titleurl]?>" title="<?=$bqsr[title]?>" target="_blank">[<span><?=date("d",$bqr[newstime])?></span>][<span><?=$monthArr[$mtime]?></span>][<span><?=date("Y",$bqr[newstime])?></span>]--<span><?=$bqsr[title]?></span></a> 
  19.         <span><?=$bqsr[smalltext]?></span> 
  20.         </li>  
  21.         [/e:loop] 
  22.     </ul> 
  23.     <ul id="list2"></ul> 
  24.     <script language="javascript"> 
  25.         var pager = new ETNGpager('mylist','mylist2',5,5);//5为每页显示条数。10为导航显示菜单数 
  26.         var curP = 1; 
  27.         page() 
  28.         function page(i){ 
  29.         curP =(curP>pager.cntP)?1:curP; 
  30.         if(i){ 
  31.         curP = n =i; 
  32.         }else{ 
  33.         n = curP++; 
  34.         } 
  35.         pager.curP = (n>pager.cntP)?pager.cntP:n; 
  36.         pager.create(); 
  37.         } 
  38.     </script> 
  39. </div> 
  40. </body> 
  41. </html> 

page.js代码如下：

  1. <!-- 
  2. var ETNGpager = function( srcName, dstName, cntPP, cntPS ) 
  3. { 
  4. this.srcName = srcName; 
  5. this.dstName = dstName; 
  6. this.curP = 1;//默认当前页为第一页 
  7. this.cntPP = cntPP || 2;//默认每页两条纪录 
  8. this.cntPS = cntPS || 3;//默认每页显示5个分页上下文 
  9. this.items = []; 
  10. this.showPNP = true;/*显示上下页链接*/ 
  11. this.showType = true;/*滑动分页*/ 
  12. this.result = {pagedata:[],pagebar:'',limit:[0,0],report:''}; 
  13. this.parse();/*总纪录数*/ 
  14. } 
  15. ETNGpager.prototype.page = function (){ 
  16. this.cntP = Math.ceil(this.cntR/this.cntPP); 
  17. /*总页数*/ 
  18. this.cntS = Math.ceil(this.cntP/this.cntPS); 
  19. /*总段数*/ 
  20. this.curS = Math.ceil(this.curP/this.cntPS); 
  21. /*当前段*/ 
  22. this.preP = this.curP -1;/*上一页*/ 
  23. this.nextP = this.curP +1;/*下一页*/ 
  24. this.preS = this.curS -1;/*上一段*/ 
  25. this.nextS = this.curS +1;/*下一段*/ 
  26. this.startR = (this.curP -1)*this.cntPP + 1;/*起始纪录*/ 
  27. this.endR = (this.curP*this.cntPP >this.cntR)?this.cntR:this.curP*this.cntPP;/*结束纪录*/ 
  28. this.result['pagedata']=[]; 
  29. if(this.showType){ 
  30. this.perSide = Math.floor(this.cntPS/2); 
  31. this.startP = (this.curP > this.perSide)?(this.curP - this.perSide):1; 
  32. this.endP = (this.startP + this.cntPS)>this.cntP?this.cntP:(this.startP + this.cntPS); 
  33. }else{ 
  34. this.startP = (this.curS-1)*this.cntPS+1; 
  35. this.endP = (this.curS*this.cntPS>this.cntP)?this.cntP:(this.curS*this.cntPS); 
  36. } 
  37. for(var i = this.startP;i<=this.endP;i++){ 
  38. this.result['pagedata'].push((i==this.curP)?'<a href="#" class="curPage">'+i+'</a>':'<a href="#" οnclick="page('+i+')">'+i+'</a>'); 
  39. } 
  40. if(this.showPNP){ 
  41. if(this.curP>1)this.result['pagedata'].unshift('<a href="#" οnclick="page('+(this.curP-1)+')">上一页</a>'); 
  42. if(this.curP<this.cntP)this.result['pagedata'].push('<a href="#" οnclick="page('+(this.curP+1)+')">下一页</a>'); 
  43. } 
  44. this.result['pagebar'] = this.result['pagedata'].join(' '); 
  45. this.result['limit'] = [this.startR,this.endR]; 
  46. this.result['report'] = '共'+this.cntR+'条,当前页'+this.startR+'-'+this.endR+','+this.curP+'/'+this.cntP+'页'; 
  47. } 
  48. ETNGpager.prototype.parse = function (){ 
  49. var obj = document.getElementById(this.srcName); 
  50. for(var i = 0;i<obj.childNodes.length;i++){ 
  51. if(obj.childNodes[i].nodeType!=3)this.items[this.items.length]=obj.childNodes[i].innerHTML; 
  52. } 
  53. this.cntR = this.items.length; 
  54. return this.items.length; 
  55. } 
  56. ETNGpager.prototype.create=function(){ 
  57. this.page(); 
  58. document.getElementById(this.dstName).innerHTML='<li>'+this.items.slice(this.startR-1,this.endR).join('</li><li>')+'</li>'; 
  59. document.getElementById(this.dstName).innerHTML+='<span class="ctrlPages">'+this.result['pagebar']+this.result['report']+'</span>'; 
  60. } 
  61. //--> 
欢迎访问钢琴花园：www.pianohl.com