建站技术网专注分享网站建设技术,网站建设教程,真正帮你学会做网站技术,轻松解决网站建设过程中遇到的常见问题,为广大站长服务。 网站地图 | 收藏本站 | 订阅
域名投资,就来找米网,认准网址:www.zhaomi.cc 专业仿站,就到仿站网:www.fangzhan.org
  站内公告: ·帝国cms教程内容已更新,欢迎关注     ·建站技术网采用阿里云服务器,备案已通    
您当前的位置:建站技术网 > cms教程 > 帝国cms教程

帝国cms首页以及自定义页面通过js实现分页

时间:2019-09-14 22:15:09  来源:网络收集  整理: 建站技术网 www.jzjsw.com     点击:0次

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

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>www.yangqq.com</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


<!--

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>';

}

//-->


<!--

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();

}

//-->


标签:首页  自定义页面  js分页
文章标题:帝国cms首页以及自定义页面通过js实现分页
文章网址:http://www.jzjsw.com/cmsJiaocheng/diguocms/11509.html
上一篇:帝国CMS管理防采集随机字符设置教程
下一篇:返回列表
来顶一下
返回首页
返回首页
相关文章
推荐资讯
我是如何通过开源项目月入 10 万的?
我是如何通过开源项目
如何通过SEO优化排名赚钱?SEO赚钱方法
如何通过SEO优化排名赚
seo优化教程:网站seo内容优化
seo优化教程:网站seo
SEO细节:企业SEO如何快速为新站做出效果
SEO细节:企业SEO如何
最新文章
栏目更新
栏目热门