<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=gb2312" />
<title>废客列表JS分页代码</title>
<script type="text/javascript" language="javascript">
function list2change(type,id)
{
var node1=document.getElementById(id).parentNode;
var node2=document.getElementById(id).parentNode.parentNode.parentNode;
var child1=new Array();
var child2=new Array();
var i,j=0,m,n=0;
for(i=0;i<node1.childNodes.length;i++)
{
if(node1.childNodes[i].nodeName=="#text")
continue;
else
child1[j]=node1.childNodes[i];
j++;
}
for(m=0;m<node2.childNodes.length;m++)
{
if(node2.childNodes[m].nodeName=="#text")
continue;
else
child2[n]=node2.childNodes[m];
n++;
}
if(type==0)
{
$("#"+id).removeClass("r_back");
$("#"+id).addClass("r_front");
$(child1[0]).removeClass("r_front");
$(child1[0]).addClass("r_back");
$(child2[1]).css("display","none");
$(child2[2]).css("display","block");
}
else
{
$("#"+id).removeClass("r_back");
$("#"+id).addClass("r_front");
$(child1[1]).removeClass("r_front");
$(child1[1]).addClass("r_back");
$(child2[2]).css("display","none");
$(child2[1]).css("display","block");
}
}
</script>
<style type="text/css">
<!--
/*这里填写自己需要的css定义*/
ul,li,form,div,span { padding: 0 0 0 0; margin: 0 0 0 0; }
.ctrlPages {COLOR: black;cursor:hand;}
.curPage {COLOR: red;cursor:hand;}
-->
</style>
<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>':'<span onclick="page('+i+')">'+i+'</span>');
}
if(this.showPNP){
if(this.curP>1)this.result['pagedata'].unshift('<span onclick="page('+(this.curP-1)+')">上一页</span>');
if(this.curP<this.cntP)this.result['pagedata'].push('<span onclick="page('+(this.curP+1)+')">下一页</span>');
}
this.result['pagebar']= this.result['pagedata'].join(' ');
this.result['limit']= [this.startR,this.endR];
this.result['report']= '<span style="margin-left:20px;"></span>共'+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("page").innerHTML='<span class="ctrlPages">'+this.result['pagebar']+this.result['report']+'</span>';
}
//-->
</script>
</head>
<body>
<!-----列表正文---->
<ul id="listcontent" style="display:none;">
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">世界要在哟以中在中在。有</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">世界要在哟以中在中在。有</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">世界要在哟以中在中在。有</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
<li><img src="news4.gif" alt="" /><a href="#" target="_blank">中要工工工在在要在在</a></li>
</ul>
<!-----\\列表正文---->
<ul id="listcontent2"></ul>
<div id="page">
<script language="JavaScript">
<!--
var pager = new ETNGpager('listcontent','listcontent2',10,5); <!-----每页显示10条,5个分页标签---->
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>
评论0