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调用客户端Java程序的方法
Jul 27 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
[转]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
星际流派综述
2020/03/04 星际争霸
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python遍历文件夹下所有excel文件
2018/01/03 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
PHP面试题及答案二
2015/05/23 面试题
幼儿园元旦家长感言
2014/02/27 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
师德师风个人总结
2015/02/06 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js