Javascript实现的分页函数


Posted in Javascript onDecember 22, 2006

From: IECN.Net ; Author: 钟钟

/**
 * 分页类构造
 * 参数 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 写类方式之八
Jul 05 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
一些常用的Javascript函数
Dec 22 #Javascript
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 #Javascript
使用Modello编写JavaScript类
Dec 22 #Javascript
获取Javscript执行函数名称的方法
Dec 22 #Javascript
Javascript开发包大全整理
Dec 22 #Javascript
用js重建星际争霸
Dec 22 #Javascript
js版本A*寻路算法
Dec 22 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
2014新年元旦活动策划方案
2014/02/18 职场文书
企业党员公开承诺书
2014/03/26 职场文书
明确岗位职责
2015/02/14 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL