Javascript实现的分页函数


Posted in Javascript onFebruary 07, 2007

/**
 * 分页类构造
 * 参数 nTotalList: 总条数
 * 参数 nPageSize: 每页显示条数
 * 参数 nPageNum: 当前页码
 * 参数 sPageUrl: 分页链接的URL,页码以[pn]代替,输出时将被替换为实际页码
 * 参数 nPageListSize: 页码列表(下拉框)中显示的最多页码条数。该参数可省略,默认100
 */
function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, nPageListSize) {
  this.totalList = nTotalList;
  this.pageSize = nPageSize;
  this.pageNum = nPageNum;
  if (nTotalList == 0)
    this.totalPages = 1;
  else
    this.totalPages = Math.floor((this.totalList-1)/this.pageSize + 1);
  this.pageUrl = sPageUrl;
  if (arguments[4])
    this.pageListSize = nPageListSize;
  else
    this.pageListSize = 100;
}

/**
 * 生成分页,将HTML直接输出
 * 无参数
 * 无返回值
 */
Pagination.prototype.generate = function() {
  var output = "";
  output += "<table width=\"98%\" cellspacing=\"1\" cellpadding=\"3\" align=\"center\"><tr><td align=\"right\">";
  output += "共 " + this.totalList + " 条 每页 " + this.pageSize + " 条 当前第 ";
  output += "<select onchange=\"if(this.value)location.href='" + this.pageUrl + "'.replace(/\\[pn\\]/,";
  output += "this.value);\" align=\"absMiddle\" style=\"font:normal 9px Verdana,Arial,宋体;\">";
  var firstPage = this.pageNum - Math.floor(this.pageListSize/2);
  if (firstPage < 1)
    firstPage = 1;
  var lastPage = firstPage + this.pageListSize - 1;
  if (lastPage > this.totalPages) {
    lastPage = this.totalPages;
    firstPage = lastPage - this.pageListSize + 1;
    if (firstPage < 1)
      firstPage = 1;
  }
  if (firstPage > 1) {
    output += "<option value=\"1\">1</option>";
    if (firstPage > 2)
      output += "<option value=\"\">…</option>";
  }
  for (var p = firstPage; p <= lastPage; p++) {
    output += "<option value=\"" + p + "\"";
    if (p == this.pageNum)
      output += " selected=\"yes\"";
    output += ">" + p + "</option>";
  }
  if (lastPage < this.totalPages) {
    if (lastPage < this.totalPages - 1)
      output += "<option value=\"\">…</option>";
    output += "<option value=\"" + this.totalPages + "\">" + this.totalPages + "</option>";
  }
  if (this.pageNum > this.totalPages)
    output += "<option value=\"\" selected=\"yes\">页码超出范围</option>";
  output += "</select>";
  output += "/" + this.totalPages + " 页 ";
  if (this.pageNum == 1) {
    output += "[首页] ";
    output += "[上页] ";
  }
  else {
    output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, "1") + "\">[首页]</a> ";
    output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.pageNum-1) + "\">[上页]</a> ";
  }
  if (this.pageNum == this.totalPages) {
    output += "[下页] ";
    output += "[尾页]";
  }
  else {
    output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.pageNum+1) + "\">[下页]</a> ";
    output += "<a href=\"" + this.pageUrl.replace(/\[pn\]/, this.totalPages) + "\">[尾页]</a> ";
  }
  output += "</td></tr></table>";
  document.writeln(output);
}

Javascript 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
用原生js做单页应用
Jan 17 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
[转]JS宝典学习笔记
Feb 07 #Javascript
HTML页面如何象ASP一样接受参数
Feb 07 #Javascript
DOM相关内容速查手册
Feb 07 #Javascript
索趣科技的答案
Feb 07 #Javascript
JS模拟多线程
Feb 07 #Javascript
使用prototype.js进行异步操作
Feb 07 #Javascript
最新优化收藏到网摘代码(digg,diigo)
Feb 07 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js图片预加载示例
2014/04/30 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
python集合类型用法分析
2015/04/08 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python秒算24点实现及原理详解
2019/07/29 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python如何求100以内的素数
2020/05/27 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
社区活动邀请函范文
2014/01/29 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS