当前位置:首页 > 文章 > 帝国CMS > 正文内容

帝国CMS首页自定义页面怎么实现分页功能

3年前 (2022-10-21)帝国CMS15123

帝国cms首页以及自定义页面如何实现分页,添加如下js代码即可:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.freexyz.cn</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="简介" />
<script src="page.js"></script>
</head>
<body>
<ul id="list" style="display:none;">
[e:loop={'selfinfo',10,0,0}]
<li><a href="<?=$bqsr[titleurl]?>" title="<?=$bqr[title]?>" ></li> 
[/e:loop]
</ul>
<ul id="list2"></ul><script src="page2.js"></script>
</body>
</html>

  page.js(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="#topnew" class="curPage">'+i+'</a>':'<a  href="#topnew" onclick="page('+i+')">'+i+'</a>');
}
if(this.showPNP){
if(this.curP>1)this.result['pagedata'].unshift('<a  href="#topnew" onclick="page('+(this.curP-1)+')">上一页</a>');
if(this.curP<this.cntP)this.result['pagedata'].push('<a  href="#topnew" onclick="page('+(this.curP+1)+')">下一页</a>');
}
this.result['pagebar'] = this.result['pagedata'].join('&nbsp;&nbsp;');
this.result['limit'] = [this.startR,this.endR];
this.result['report'] ='<a class="allpage"><b>'+this.cntR+'</b></a>&nbsp;&nbsp;' ;
}
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+='<div class="pagelist mt20">'+this.result['report']+this.result['pagebar']+'</div>';
}
//-->

  page2.js(JS文件)

<!--
var pager = new ETNGpager('list', 'list2', 25, 5); //25为每页显示条数。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();
}
//-->

  好了,快去试试吧!

扫描二维码推送至手机访问。

版权声明:本文由蓝博发布,如需转载请注明出处。

本文链接:https://www.blueboss.cn/p/142.shtml

“帝国CMS首页自定义页面怎么实现分页功能” 的相关文章

帝国CMS动态页支持栏目导航标签循环子栏目数据标签万能标签的调用

帝国CMS动态页支持栏目导航标签循环子栏目数据标签万能标签的调用

分享一种利用JS来实现支持栏目导航标签,万能标签,循环子栏目数据标签的方法。   第一步:在【模板】下面增加标签模板,标签模板内容如下:   页面模板内容(*): [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.list...

帝国CMS灵动标签调用当前栏目下子栏目列表

帝国CMS灵动标签调用当前栏目下子栏目列表

灵动标签调用当前栏目下子栏目,支持栏目自定义排序。下面帝国cms模板网就来告诉大家: [e:loop={"select classname,classpath,classid from phome_enewsclass where bclassid='$GLOBALS[navclassid]' a...

帝国cms用SQL语句调用栏目导航一级栏目和二级栏目

帝国cms用SQL语句调用栏目导航一级栏目和二级栏目

帝国cms调用一级栏目及下面的二级栏目调用方法如下: SQL语句 <?php  $ecms_bq_sql=sys_ReturnEcmsLoopBq("select * from [!db.pre!]enewsclass where bclassid=0 order by myorder li...

帝国CMS中#091;!--no.num--]标签的用法分析

帝国CMS中#091;!--no.num--]标签的用法分析

帝国CMS [!--no.num--] 标签用法: 帝国CMS[!--no.num--] 指定从某一数字开始显示 代码如下: <?=$bqno+5?> 帝国CMS[!--no.num--] 输出效果为 1 2 3 4 5 6 7 8...样式 代码如下: <?=$bqno?&g...

帝国CMS模板用灵动标签调用同级栏目导航并且当判断显示当前栏目高亮

帝国CMS模板用灵动标签调用同级栏目导航并且当判断显示当前栏目高亮

帝国cms模板里面怎么用灵动标签调用同级的栏目导航呢?同时判断显示当前栏目导航高亮! 调用代码:(注意:hover为判断当前高亮css样式) [e:loop={"select classname,classpath,classid from phome_enewsclass where bclas...

帝国cms内容页调用相关阅读文章

帝国cms内容页调用相关阅读文章

帝国CMS调用相关信息文章的方法,帝国cms怎么调用相关阅读文章呢? 调用代码: [e:loop={"select * from phome_ecms_news where classid={$ecms_gr['classid']} order by onclick desc limit 5",0...