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列表分页的更多相关文章

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用
在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...
PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
单篇文章JS模拟分页
废话部分前两天做了一个前台分页插件,支持ajax读取数据绑定前台和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介利用Bootstrap Paginator插件和knockout.js完成分页功能图片在线裁剪和图片上传总结循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结一. 设计原则使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
wepy小程序实现列表分页上拉加载（2）
第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式打开list.wpy文件 template结构代码: <temp ...
wepy小程序实现列表分页上拉加载（1）
使用wepy开发微信小程序商城第一篇:项目初始化使用wepy开发微信小程序商城第二篇:路由配置和页面结构列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件初始代码 ...

随机推荐

python3爬虫初探（五）之从爬取到保存
想一想,还是写个完整的代码,总结一下前面学的吧. import requests import re # 获取网页源码 url = 'http://www.ivsky.com/tupian/xiaoh ...
Display Images in widget
在自定义的widget中显示图片. 思路:定义类MyWidget,public 继承自QWidget,然后实现 void paintEvent(QPaintEvent *). 新建Empty qmak ...
PDOStatement::bindParam的一个陷阱
废话不多说, 直接看代码: <?php $dbh = new PDO('mysql:host=localhost;dbname=test', "test"); $query ...
HDU 1052
http://acm.hdu.edu.cn/showproblem.php?pid=1052 田忌赛马本质就是一个贪心 res表示田忌的胜利场次 1.田忌最快马快于王的最快马,两个最快马比,res++ ...
java 基本类型
1 常量整数 byte 1字节 8位 -27~27-1 0111 1111 ~1000 0000 short 2 16 int 4 32 long 8 64 1111 111 ...
使用 CUBLAS 库给矩阵运算提速
前言编写 CUDA 程序真心不是个简单的事儿,调试也不方便,很费时.那么有没有一些现成的 CUDA 库来调用呢? 答案是有的,如 CUBLAS 就是 CUDA 专门用来解决线性代数运算的库. 本文将 ...
SSIS使用OleDB和Ado.Net两种方式调用存储过程
在使用”执行 SQL 任务“组件调用存储过程时,连接方式使用OleDB和Ado.Net稍有不同,结合图例说明一下当我们使用OleDB时,设置的截图如下: 参数使用?来代替,Parameter Nam ...
yii2构造方法
控制器文件下面建一公共控制器:: CommonController.php 里面写一个空方法 : public function init(){} 然后在你要写构造函数的控制器类里写一个方法 ( ...
徹底刪除atom
rm -f ~/.atom rm -f /usr/local/bin/atom rm -f /usr/local/bin/apm rm -f /Applications/Atom.app rm -f ...
用无线网络进行Android开发中的调试
1.手机具有root权限 2.安装adbWireless1.5.4.apk (下面有下载地址) 3.敲入命令:adb connect 192.168.1.127 后面是手机的IP地址打开eclip ...

js列表分页

js列表分页的更多相关文章

随机推荐

热门专题