Javascript实现的分页函数

/**
 * 分页类构造
 * 参数 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);
}

(0)

相关推荐

  • Java web velocity分页宏示例

    复制代码 代码如下: #macro(pager $url $pager)<ul class="pagination"> #set($FRONT_LEN = 4) #set($BEHIND_LEN = 5) #set($PAGER_LEN = 10) #set($PAGER_CENTER = $!{pager.pageNum} - $!{BEHIND_LEN}) <li #if($!{pager.currentPage} == 1) class="disabl

  • javascript 新闻标题静态分页代码 (无刷新)

       一个模板,从数据库取n条记录,生成静态. 做单页面的静态化,索引页面是用JS对数组进行组合的. 因为记录只是一个标题,一个链接,字节数不会太大, 那么用js去用这个大数组进行分页,貌似不错,很节约带宽! 还是很棒的,简单,实用,值得推荐! JS代码: 复制代码 代码如下: function title_array(title, link_add, store_time) { this.title = title; this.link_add = link_add; this.store_t

  • 纯javascript实现分页(两种方法)

    先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值

  • java调用oracle分页存储过程示例

    1.分页类 复制代码 代码如下: package org.zh.basic; /** * 页面类 *  * @author keven *  */public class PageInfo { // 定义    private String p_tableName; // -表名    private String p_strWhere; // --查询条件    private String p_orderColumn; // --排序的列    private String p_orderS

  • JavaMe开发自适应滚动显示

    [问题描述] 我们常看到一些滚动显示的实例,比如UC浏览器中,显示网页的内容.当内容比较多时,采用滚动分页显示是合理的.在Canvas中绘图中,多余的内容被截断了.如何实现滚动分页显示呢? [原理] JavaMe中有一个坐标变换的功能.当触发相应的按键事件时,我们就让其显示相应的页,并且使滚动条滚动到相应的位置. [代码清单] ShowHelp.java package com.token.view; import javax.microedition.lcdui.Font; import ja

  • JavaMe开发绘制文本框TextEdit

    [问题描述] TextEdit是采用GameCanvas绘制的文本编辑器.本文结合实例给出实现的方法. [原理] 1 运用Graphics.GameCanvas绘制文本框和光标. 2 检测到输入事件时,跳转到 高级界面->TextBox .通过系统调用输入法完成输入. 3 将TextBox输入的值返回给TextEdit对象. [设计模式] 这个过程有点类似装饰模式,实际上,实现输入的还是TextBox,只是给TextBox装饰了一下,形成了一个漂亮的外观. [代码清单] TextEdit.jav

  • javascript分页代码(当前页码居中)

    复制代码 代码如下: function setPage(opt){ if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false}; var allPageNum = opt.allPageNum; //总的页数 var showPageNum = opt.showPageNum; //显示的页数 var curpageNum = opt.curpag

  • Java(基于Struts2) 分页实现代码

    分页实现的基本过程是这样的: 1. 设置自己的分页器的基本参数(可以从配置文件中读取) ■每页显示的记录条数 ■每次最多显示多少页 2. 编写设置分页器其他参数的函数 主要参数有以下几个: 总记录条数 总页数 当前页号:现在显示的页数 每页显示的记录条数 当前页开始行(第一行是0行) 第一页页号 最后页页号 下一页页号 上一页页号 画面上显示的起始页号 画面上显示的结束页号 参数基本实现原理:设置以上各个参数,实际上只需要三个参数就可以对所有的其他变量进行设置,即总记录条数,每页显示记录数,每次

  • JavaMe开发绘制可自动换行文本

    [问题描述] JavaMe Graphics类中的drawString不支持文本换行,这样绘制比较长的字符串时,文本被绘制在同一行,超过屏幕部分的字符串被截断了.如何使绘制的文本能自动换行呢? [分析] drawString无法实现自动换行,但可以实现文本绘制的定位.因此可考虑,将文本拆分为多个子串,再对子串进行绘制.拆分的策略如下: 1 遇到换行符,进行拆分: 2 当字符串长度大于设定的长度(一般为屏幕的宽度),进行拆分. [步骤] 1 定义一个String和String []对象: priv

  • javascript实现简单的分页特效

    下面是一段javascript实现的分页代码,当然必须要结合后台代码实现.大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function setPage(opt) { if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum) { return false }

  • javascript+xml技术实现分页浏览

    共有两个文件tmh.htm & tt.xml 源代码如下: tmh.htm  复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>  <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="

  • javascript 支持页码格式的分页类

    但是他们插件的附属功能很多又不需要,而且没必要就为了这么一个功能区引用这个库,为速度考虑吧,当然你服务器好也行,但是其实这个效果不是必须的,但是觉的会常用,所以就包装成类了,供以后使用,也供有需要的人学习使用. 下面只是一个简单的demo,用的话自己可以在编辑页码样式,有默认的格式.不废话了,自己看吧,有注释使用说明...类(3kb)使用可以参照demo,不明白使用的可以留言. 以后会慢慢写一些项目开发中常遇到的问题,以及解决方案,和大家学习分享. jpage.js 复制代码 代码如下: /*

  • Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码

    首先是Jquery 无标题文档 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $ul.animate({

随机推荐