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 08 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
vue实现简单图片上传
2020/06/30 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Django框架序列化与反序列化操作详解
2019/11/01 Python
django的autoreload机制实现
2020/06/03 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
vue实现倒计时功能
2021/03/24 Vue.js
总经理助理的职责
2014/03/14 职场文书
志愿者活动总结
2014/04/28 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
教师个人发展总结
2015/02/11 职场文书
给朋友的道歉短信
2015/05/12 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
CSS 伪元素::marker详解
2021/06/26 HTML / CSS