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动态给table添加、删除行 改进版
Jan 19 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
React中的Context应用场景分析
Jun 11 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实现简单注册登录系统
2020/12/28 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
js实现前面自动补全位数的方法
2018/10/10 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
python搜索指定目录的方法
2015/04/29 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
基于python的Paxos算法实现
2019/07/03 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
优质护理服务演讲稿
2014/05/07 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
平面设计专业求职信
2014/08/09 职场文书
小学生运动会报道稿
2014/09/12 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
新郎接新娘保证书
2015/05/08 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
python套接字socket通信
2022/04/01 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL