`

一个分页的js

 
阅读更多 
<!--  
* 用js分页显示ul/ol的列表 
* 
* 这里的演示设置了自动滚动* 
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>
分享到：
| JavaScript实现拖拽网页内元素的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    很好的一个分页 js

    标题中的“很好的一个分页 js”表明我们讨论的是一个JavaScript库或插件，主要用于实现网页的分页功能。在Web开发中，分页是处理大量数据时常见的需求，它允许用户逐页浏览内容，提高用户体验并减少加载时间。这篇...

    js分页控件--js封装的分页控件

    自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.

    分页js文件

    在这个主题中，我们将深入探讨"分页js"的相关知识点，包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS（如`pageNav.css`）优化分页的样式。 首先，我们要理解分页的基本概念。分页通常用于显示...

    js分页示例,前台分页，客户端分页，分页机制，js分页

    例如，下面是一个简单的JavaScript分页代码片段： ```javascript let data = [/* your data array */]; let pageSize = 10; let currentPage = 1; function renderPage() { let startIndex = (currentPage - 1) * ...

    一个简单的js分页

    一个简单的js分页

    js分页javascript分页

    2. Pagination.js：一个独立的JavaScript分页库，支持自定义分页样式，支持Ajax请求数据。 3. vue-paginate：针对Vue.js框架的分页组件，易用且高度可定制。 4. react-pagination：适用于React应用的分页组件，可与...

    JS+HTML分页代码

    本示例提供的"JS+HTML分页代码"是一个利用JavaScript（JS）和超文本标记语言（HTML）实现的分页功能，主要包含了首页、前页、后页、尾页以及自定义分页页号的功能。 **HTML基础**： HTML是网页的基础，用于构建页面...

    一个简单的分页js

    一个简单实用的分页js，包括 上一页，下一页，转到 等操作 只需简单的调用个js函数页面上就能出现分页。js代码也是简单明了方便读取。

    一个简单的JS实现的长文章分页

    标题 "一个简单的JS实现的长文章分页" 涉及到的是JavaScript编程中的一个常见功能，即在网页上处理大量文本内容时如何通过分页提高用户体验。在Web开发中，尤其是在内容丰富的博客、论坛或者新闻网站中，长篇文章...

    一个分页例子

    本示例是一个基于JSP（JavaServer Pages）的分页小项目，结合了JavaScript、AJAX（Asynchronous JavaScript and XML）技术，同时使用了数据库存储数据。 1. **JSP基础** JSP是Java平台上的动态网页技术，它允许...

    一个通用的JavaScript分页

    这个通用JavaScript分页实现提供了一个基础框架，可以根据实际需求进行扩展，如添加异步加载数据的功能、调整样式、添加分页参数等。它通过控制页码显示的范围和间隔，使得分页导航既简洁又实用，能够适应不同数量的...

    js分页功能 js分页功能

    JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，包括实现动态内容、用户交互、页面行为控制等。在大型数据展示或者列表展示时，为了提高用户体验，通常会采用分页功能来将大量数据分块...

    js分页效果

    总的来说，"js分页效果"是一个综合性的前端开发任务，涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例，开发者不仅可以学习到分页的实现技巧，还能加深对前端开发整体流程的...

    利用js制作html table分页示例(js实现分页)

    描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...

    分页js

    通过以上步骤，你可以创建一个基本的分页js功能。当然，实际应用中可能需要考虑更多细节，比如分页插件的缓存机制、异步加载数据、动态计算总页数等。不同的分页js插件可能有不同的API和实现方式，例如`bootstrap-...

    纯js分页模板

    纯JavaScript分页模板通常会维护一个状态对象，包含当前页数、总页数、每页显示的条目数等信息。 2. 实现方式： - 计算分页参数：首先，需要根据总数据量和每页显示的条目数来计算总页数。如果数据量可变，还需...

    js真假分页示例

    "js真假分页示例"是关于如何使用JavaScript（特别是jQuery）实现无刷新分页的一个教程。这种技术允许用户在不重新加载整个页面的情况下浏览多页内容，提高用户体验并减少服务器负担。 "真假分页"的概念在前端开发中...

    推荐10个js分页样式

    - 根据文件名，如"12_154640_a8zdJSpage0.06v20050426"，我们可以推测这可能是一个名为"JSpage"的JavaScript分页库的不同版本。"0.06"可能是版本号，而"20050426"可能是发布日期。 - 同理，其他类似命名的文件可能...

    JS分页控件+CSS

    这里提到的"JS分页控件+CSS"是一个针对网页分页功能的解决方案，结合了JavaScript（JS）和层叠样式表（CSS）的技术。下面我们将深入探讨这两个关键组成部分以及它们如何协同工作。 **JS分页控件** JavaScript是一...

    js静态分页 javascript

    以提供的文件"js静态分页.htm"为例，这个文件可能是一个简单的HTML页面，展示了如何使用JavaScript实现静态分页的基本结构和代码。打开这个文件，你可以看到具体的HTML布局、CSS样式和JavaScript脚本，这些都是实现...

Magicbox
Global site tag (gtag.js) - Google Analytics