ECMS灵动标签调用列表【JAVASCRIPT分页】
2016-12-14 10:46
225 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ECMS灵动标签调用列表【JAVASCRIPT分页】</title> <script src="css/page.js" type="text/javascript"></script> </head> <body> <div class="content"> <ul id="list" style="display:none;"> [e:loop={'SELECT newstime , titleurl , title , smalltext FROM phome_ecms_news',0,24,0}] <? $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."); $mtime = date("m",$bqr[newstime]); ?> <li> <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> <span><?=$bqsr[smalltext]?></span> </li> [/e:loop] </ul> <ul id="list2"></ul> <script language="javascript"> var pager = new ETNGpager('mylist','mylist2',5,5);//5为每页显示条数。10为导航显示菜单数 var curP = 1; page() 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> </div> </body> < </html>
page.js代码如下:
<!--
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)?'<a href="#" class="curPage">'+i+'</a>':'<a href="#" onclick="page('+i+')">'+i+'</a>');
}
if(this.showPNP){
if(this.curP>1)this.result['pagedata'].unshift('<a href="#" onclick="page('+(this.curP-1)+')">上一页</a>');
if(this.curP<this.cntP)this.result['pagedata'].push('<a href="#" onclick="page('+(this.curP+1)+')">下一页</a>');
}
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><li>')+'</li>';
document.getElementById(this.dstName).innerHTML+='<span class="ctrlPages">'+this.result['pagebar']+this.result['report']+'</span>';
}
//-->
相关文章推荐
- 帝国cms灵动标签调用列表序列号
- javascript 实现ajax调用下的动态分页脚本
- bboss taglib 通过数据加载器获取数据的分页/列表标签
- struts2 标签完成分页,类似百度,显示页签列表
- 配合ckEditor分页标签,用javascript编写分页函数,实现文章内容分页
- phpcms_v9 列表栏目组图调用的标签写法
- 第二节:ExtJS调用WCF系列-----分页排序列表实现
- php版getElementsByTagName , php版根据标签名获取 标签节点列表.模拟javascript的getElementsByTagName函数
- javascript实现浏览器端列表分页示例
- java中显示列表有很多成型的组件,但我喜欢RICO一个开源的报表显示组件(javascript)的不分页显示
- 帝国灵动标签调用任意栏目名称和链接
- 6.5 分页列表详细信息标签预编译sql获取数据功能
- DEDECMS模板如何调用arclist标签实现首页分页
- dede列表分页问题解决Pagelist标签详解
- HTML A标签调用javascript方法的几种方法
- bboss taglib 分页/列表标签功能介绍
- dedecms TAG标签列表分页链接优化方法
- 灵动标签调用栏目导航技巧
- [转]JavaScript创建Applet 标签的属性介绍 以及 Applet调用JavaScript
- 灵动标签调用新闻正文内容第一张图片的方法