`
hcmfys
  • 浏览: 357734 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 分页（转载）

    博客分类：
  • php
JavaScriptIEprototypeGoMicrosoft 
阅读更多 
function showPages(name) { //初始化属性
 this.name = name;      //对象名称
 this.page = 1;         //当前页数
 this.pageCount = 1;    //总页数
 this.argName = 'page'; //参数名
 this.showTimes = 1;    //打印次数
}

showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
 var chk = args.match(reg);
 this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page))) this.page = 1;
 if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
 if (this.page < 1) this.page = 1;
 if (this.pageCount < 1) this.pageCount = 1;
 if (this.page > this.pageCount) this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == '' || typeof(mode) == 'undefined') mode = 0;
 switch (mode) {
  case 0 : //模式1 (页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#139;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
   }
   for (var i = 1; i <= this.pageCount; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
     }
    }
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#155;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#139;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
   }
   if (this.page % 10 ==0) {
    var startPage = this.page - 9;
   } else {
    var startPage = this.page - this.page % 10 + 1;
   }
   if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
   for (var i = startPage; i < startPage + 10; i++) {
    if (i > this.pageCount) break;
    if (i == this.page) {
     strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
    } else {
     strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
    }
   }
   if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#155;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="number">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">&#171;</span>';
    strHtml += '<span title="Prev Page">&#139;</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&#171;</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#139;</a></span>';
   }
   if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
   if (this.page >= 5) strHtml += '<span>...</span>';
   if (this.pageCount > this.page + 2) {
    var endPage = this.page + 2;
   } else {
    var endPage = this.pageCount;
   }
   for (var i = this.page - 2; i <= endPage; i++) {
    if (i > 0) {
     if (i == this.page) {
      strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
     } else {
      if (i != 1 && i != this.pageCount) {
       strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
      }
     }
    }
   }
   if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
   if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">&#155;</span>';
    strHtml += '<span title="Last Page">&#187;</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#155;</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&#187;</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
   strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
   strHtml += '<span class="arrow">';
   if (prevPage < 1) {
    strHtml += '<span title="First Page">9</span>';
    strHtml += '<span title="Prev Page">7</span>';
   } else {
    strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
    strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
   }
   if (nextPage > this.pageCount) {
    strHtml += '<span title="Next Page">8</span>';
    strHtml += '<span title="Last Page">:</span>';
   } else {
    strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
    strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
   }
   strHtml += '</span><br />';
   break;
  case 4 : //模式4 (下拉框)
   if (this.pageCount < 1) {
    strHtml += '<select name="toPage" disabled>';
    strHtml += '<option value="0">No Pages</option>';
   } else {
    var chkSelect;
    strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
    for (var i = 1; i <= this.pageCount; i++) {
     if (this.page == i) chkSelect=' selected="selected"';
     else chkSelect='';
     strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
    }
   }
   strHtml += '</select>';
   break;
  case 5 : //模式5 (输入框)
   strHtml += '<span class="input">';
   if (this.pageCount < 1) {
    strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
   } else {
    strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
    strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
    strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
    strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementByIdx_x(\'pageInput' + this.showTimes + '\').value);"></option>';
   }
   strHtml += '</span>';
   break;
  default :
   strHtml = 'Javascript showPage Error: not find mode ' + mode;
   break;
 }
 return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
 if (isNaN(parseInt(page))) page = 1;
 if (page < 1) page = 1;
 if (page > this.pageCount) page = this.pageCount;
 var url = location.protocol + '//' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
 args = args.replace(reg,'$1');
 if (args == '' || args == null) {
  args += '?' + this.argName + '=' + page;
 } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
   args += this.argName + '=' + page;
 } else {
   args += '&' + this.argName + '=' + page;
 }
 return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
 var turnTo = 1;
 if (typeof(page) == 'object') {
  turnTo = page.options[page.selectedIndex].value;
 } else {
  turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
 document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
 if(!ie) var key = e.which;
 else var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
 return false;
}

 

 

使用 方法

<html>
<head>
<title>webczw</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="page.js"></script>
<script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =200;  // 定义总页数(必要)
pg.argName = 'p';  // 定义参数名(可选,默认为page)

/*document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
*/
//document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
//document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
//pg.printHtml(3);
//document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
//pg.printHtml(4);
//document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
//pg.printHtml(5);

//-->
  </script>

</body>
</html>

 

分享到：
| smart 学习
评论
发表评论

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

相关推荐

    javascript排序分页（转载）

    在网页开发中，数据的展示往往需要处理大量信息，这时分页和排序功能就显得尤为重要。JavaScript，作为浏览器端的主要脚本语言，被广泛用于实现...希望这些内容能对你在JavaScript分页和排序方面的学习和实践有所帮助。

    jquery 分页 为了收藏纯属转载

    jQuery是一个轻量级、功能丰富的JavaScript库，它为实现分页提供了便利。本篇将详细介绍jQuery分页插件的使用及其实现原理。 ### 1. 分页的基本概念 分页是将大量数据分成多个小部分，每次只加载一部分到页面上，...

    JS 使用 window对象的print方法实现分页打印功能

    1.但是网上好多案例都不支持分页功能，最后通过CSS的page-break-after:always样式解决分页问题，以下代码纯个人编写，有需要的朋友可以直接复制到网页中使用，转载请注明出处，谢谢！  &lt;!DOCTYPE ...

    基于Web的套打方案集粹(转载)

    1. **无法精确分页**：浏览器根据页面内容自动分页，导致无法控制分页位置。 2. **边距及打印文字对齐问题**：由于浏览器默认样式限制，难以精准控制打印区域。 3. **不支持连续打印**：无法实现一次性连续打印多份...

    JS组件Bootstrap Table使用方法详解

    转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，...

    信息类网站源码-转载

    以上是基于给定文件名推测的各个页面的功能和涉及的技术，实际源码可能还包括数据库连接文件（如conn.asp或db.asp）、样式表（CSS文件）和脚本文件（如js文件）等，它们共同构成了一个完整的网站系统。在使用或修改...

    js使用小技巧

    取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...

    birt经验之谈转载

    同时，为了优化性能，可以考虑分页加载数据，只加载当前显示的部分，或者使用服务器端分页来减少客户端负担。 总的来说，BIRT是一个强大的报表工具，提供了丰富的功能和高度的灵活性。通过深入理解和有效利用这些...

    新闻动态生成HTML，asp.net，功能强大，欢迎转载！

    3. **业务逻辑层（BLL）**：处理业务逻辑，如验证数据、排序新闻、分页等。这一层将数据访问层与视图层隔离开，使得系统更易于维护和扩展。 4. **呈现层（View）**：使用Razor视图引擎编写HTML模板，动态渲染新闻...

    Nodejs+Express+MongoDB搭建个人博客源码

    功能包括： 多人注册、登录、发表文章、登出、文章编辑与删除、存档、标签、分页、留言、用户个人主页、文章PV统计及留言统计、增加用户头像、 标题关键字查询（有限的正则查询）、转载功能、日志功能

    flaskTs-20180309:用flask开发个人博客源代码转载自：https

    2. 分页功能：当文章数量较多时，实现分页展示。 3. 搜索功能：提供搜索框，允许用户搜索感兴趣的文章。 4. 主题切换：为用户提供多种界面主题选择，提升用户体验。 六、总结 "flaskTs-20180309"项目为初学者提供了...

    N-blog:NodeJs的博客-番外篇

    多用户注册/登录文章发表/转载/评论/删除上传文件存档分页标签分类访问/评论/转载统计删除评论标题查询(有限的正则)用户中心友情链接安装用git clone 把项目克隆到本地然后进入该目录,在终端运行npm install再运行...

    xtruet.github.com:https

    除特别声明或转载外，所有博文采用协议进行许可。 致谢 参考 ，感谢。 托管于，感谢。 由驱动，感谢。 留言和阅读量系统基于和，感谢。 博文目录插件在基础上修改，感谢。 博客搜索插件使用了，感谢。 代码高亮及...

    nodejsblog:节点博客

    这是一个博客系统 功能： ...发表 | 编辑 | 删除 博文 添加评论 添加分页功能 添加存档 添加标签 添加page view counter 添加检索功能 添加404页面 添加转载功能(没有验证用户是否已转载该文章) 添加日志功能

    GOINDEX:一个goindex的扩展主题

    GoIndex结合 和 的力量，你...这个主题的goindex目前是基于 转载预览Acrou:特色 :crown: 页面级缓存，浏览器前进后退不刷新秒加载（mac用户使用触控板体验更佳） :card_index_dividers: 多盘切换 :locked_with_key: ...

    Art2008 CMS 网站管理系统 v3.1.rar

    15、水印缩略图，可按要求等比缩小，可按要求在指定位置加图片或文字水印，提升内容被转载后的宣传机会。 16、强化在线编辑器（采用ewebeditor在线编辑器），可视化编辑器，类似word的所件即所得的在线内容编辑功能...

    CMS 网站管理系统 源码

    15、水印缩略图，可按要求等比缩小，可按要求在指定位置加图片或文字水印，提升内容被转载后的宣传机会。 16、强化在线编辑器（采用ewebeditor在线编辑器），可视化编辑器，类似word的所件即所得的在线内容编辑功能...

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