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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JQuery小知识
Oct 15 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
python回调函数的使用方法
2014/01/23 Python
Python FTP操作类代码分享
2014/05/13 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python Socket编程详细介绍
2017/03/23 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Django nginx配置实现过程详解
2020/09/10 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
老师推荐信
2013/10/28 职场文书
学生会主席竞聘书
2014/03/31 职场文书
低碳环保口号
2014/06/12 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
电影雨中的树观后感
2015/06/15 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js