js列表分页

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
/*这里填写自己需要的css定义*/
body { width: 760px; padding: 0 0 0 0; margin: 0 auto 0 auto; font-size: 12px; font-family: "Arial", "Helvetica", "sans-serif"; }
td { font-size: 12px; }
ul,li,form,div,span { padding: 0 0 0 0; margin: 0 0 0 0; }
.ctrlPages {COLOR: #f60;}
.curPage {COLOR: #f00;}
-->
</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(‘&nbsp;&nbsp;‘);
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>‘;
}
//-->
</script>
</head>
<body>
<ul id="listcontent" style="display:none;">
<li><a href=http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml target=‘_blank‘>支付宝与六大代理签订协议 </a></li>
<li><a href=http://forum.taobao.com/showThread.htm?thread=3123988&forum=14 target=‘_blank‘>刷卡积分可网上购物 </a></li>
<li><a href=/alipay/news/sample/23492.htm target=‘_blank‘>支付宝为网店保驾护航 </a></li>
<li><a href=http://it.people.com.cn/GB/8219/50656/52310/3822563.html target=‘_blank‘>支付宝红包送来红地毯 </a></li>
<li><a href=/alipay/news/sample/22701.htm target=‘_blank‘>紧急天气预报"红色风暴"空降支付宝 </a></li>
<li><a href=/alipay/news/sample/22699.htm target=‘_blank‘>小红包背后大名堂 </a></li>
<li><a href=http://www.q88.net/SHOP_2005A/zfb.aspx target=‘_blank‘>Q88.net全面无缝接合支付宝 </a></li>
<li><a href=/alipay/news/sample/21529.htm target=‘_blank‘>电子支付规范走出第一步 使用专业版受鼓励 </a></li>
<li><a href=/alipay/news/sample/19786.htm target=‘_blank‘>从支付宝看电子商务的发展 </a></li>
<li><a href=/alipay/news/sample/19784.htm target=‘_blank‘>谁能与支付宝PK？ </a></li>
<li><a href=/alipay/news/sample/19618.htm target=‘_blank‘>国内第一家引入支付宝的网络图库正式开通 </a></li>
<li><a href=/alipay/news/sample/19475.htm target=‘_blank‘>新浪网：中关村在线加入支付宝联盟 </a></li>
<li><a href=/alipay/news/sample/19471.htm target=‘_blank‘>千家网店加入支付宝联盟 </a></li>
<li><a href=/alipay/news/sample/18549.htm target=‘_blank‘>我与支付宝的分分秒秒 </a></li>
<li><a href=/alipay/news/sample/18207.htm target=‘_blank‘>支付宝—放心“网宝”的理由 </a></li>
<li><a href=/alipay/news/sample/17944.htm target=‘_blank‘>欧飞数卡携手支付宝,再创新高 </a></li>
<li><a href=/alipay/news/sample/17803.htm target=‘_blank‘>莎莎香水网:支付宝助我完成销售计划 </a></li>
<li><a href=/alipay/news/sample/17801.htm target=‘_blank‘>使用支付宝:一个月交易额翻5倍 </a></li>
<li><a href=/alipay/news/sample/17799.htm target=‘_blank‘>支付宝：一个普通站长的自述 </a></li>
<li><a href=/alipay/news/sample/17797.htm target=‘_blank‘>新开网店如何日交易额达8000元？ </a></li>
<li><a href=/alipay/news/sample/17563.htm target=‘_blank‘>名大数码：网店月交易额如何突破30万 </a></li>
<li><a href=http://it.sohu.com/20050916/n240400443.shtml target=‘_blank‘>中国卡网结盟支付宝创交易量周增长新高 </a></li>
<li><a href=http://it.people.com.cn/GB/42891/42894/3676101.html target=‘_blank‘>支付宝联盟与合作伙伴合作在人民网推广 </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---103546-.htm target=‘_blank‘>网络银行使用全攻略---足不出户查看汇款明细 </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---1561087-.htm target=‘_blank‘>"支付宝购物体验"征文-----贿赂 </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---2102458-.htm target=‘_blank‘>卖家谈：谁是支付宝最终的获利者？ </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---1617047-.htm target=‘_blank‘>淘宝两钻卖家感悟支付宝 </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---1686484-.htm target=‘_blank‘>支付宝“即时到帐交易”的使用经验及建议 </a></li>
<li><a href=http://forum.taobao.com/show_thread-50---1794216-.htm target=‘_blank‘>我的第一笔网上交易 </a></li>
</ul>
<ul id="listcontent2">列表信息加载中，请您稍等……</ul>
<script language="JavaScript">
<!--
var pager = new ETNGpager(‘listcontent‘,‘listcontent2‘,10,5);
var curP = 1;
showtime = setInterval("page()", 5000);
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>
</body>
</html>

js列表分页,布布扣,bubuko.com

时间： 2024-10-27 07:26:45

js列表分页的相关文章

单篇文章JS模拟分页

废话部分前两天做了一个前台分页插件,支持ajax读取数据绑定前台和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求.所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1).这里就不讨论具体的技术细节了和上一篇的分页计算原理

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #

使用js进行分页

通过Ajax调用js方法进行局部刷新分页,大大减少性能消耗下面是js代码,可封装成js文件 /** * 分页的改变 * @param pageShowId 分页显示的id * @param i (1 上一页,2 下一页,3 当前页,4 第一页) * @returns 操作过后的页数(当前页) */ function pageChange(pageShowId,i){ if(i == 1){ clickUp(pageShowId); }else if(i == 2){ clickNext(pag

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

python列表分页

列表分页上章的结束,若在实际开发过程中,会发现一个问题,那就首页或关注分享,是一下子按时间顺序全部显示出来,这在实际项目中不可能出现的,想想实际中的产品是如何做的? 一般来说,无非是两种,一种是使用页码,来进行分页,还有一种是js到页底自动加载,而使用页底自动加载的话,上一章实现的通过tab来区分全部和关注就不可取了,因为无法保证两个tab加载的内容数量一致,导致页面布局就无法实现,所以,这里首页参考tumblr的实现方式,删除关注分享的部分,只保留全部分享,使用js页底动态加载分页方式,同时

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,特此记录下来.如有不足之处,欢迎指出. 本插件可以实现的功能: 1. 可初始化每页条数,以及重新选择每页条数 2.自定义首末页.上下页按钮的显示内容(是:<<. >>. < . > 还是:首页.末页.上一页.下一页) 3.设置当前页在一定范围时,是否显示省略号按钮 4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个

wepy小程序实现列表分页上拉加载（2）

第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式打开list.wpy文件 template结构代码: <template> <view class="list-wrapper">  <scroll-view scroll-y="true" style="height: 400px;" bindscr

嗨分享-前端技术-帝国CMS手机站修改列表分页(sysShowListMorePage)

http://bbs.phome.net/showthread-31-318753-0.html 如果你的网站使用的是帝国CMS.PC站和手机站各使用一个模板组,但共同使用一个数据库.那么你的PC站和手机站,列表分页样式是一样的吗? 今天<a href="http://www.thy6415.com">嗨分享-前端技术</a>将带你感受不一样的分页样式! PC站可以把分页按1.2.3.4...这样并排列出来,但手机站是万万不可以这样做的,否则手机屏幕小,分页看

帝国CMS手机站修改列表分页(sys_ShowListMorePage)

如果你的网站使用的是帝国CMS.PC站和手机站各使用一个模板组,但共同使用一个数据库.那么你的PC站和手机站,列表分页样式是一样的吗? 今天嗨分享-前端技术将带你感受不一样的分页样式! PC站可以把分页按1.2.3.4...这样并排列出来,但手机站是万万不可以这样做的,否则手机屏幕小,分页看着都好长,一点都不美观. 帝国CMS的PC站可以使用[!--show.listpage--]调用列表形式的列表分页函数(sys_ShowListMorePage). 一旦PC站使用[!--show.list