一个重构的js分页类

// JavaScript Document

/**//**

* js分页类

* @param iAbsolute 每页显示记录数

* @param sTableId 分页表格属性ID值，为String

* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容

* @Version 1.0.0

* @author 辛现宝 2007-01-15 created

* var __variable__; private

* function __method__(){};private

*/

function Page(iAbsolute,sTableId,sTBodyId)

{

this.absolute = iAbsolute; //每页最大记录数

this.tableId = sTableId;

this.tBodyId = sTBodyId;

this.rowCount = 0;//记录数

this.pageCount = 0;//页数

this.pageIndex = 0;//页索引

this.__oTable__ = null;//表格引用

this.__oTBody__ = null;//要分页内容

this.__dataRows__ = 0;//记录行引用

this.__oldTBody__ = null;

this.__init__(); //初始化;

};

/**//*

初始化

*/

Page.prototype.__init__ = function(){

this.__oTable__ = document.getElementById(this.tableId);//获取table引用

this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用

this.__dataRows__ = this.__oTBody__.rows;

this.rowCount = this.__dataRows__.length;

try{

this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute;

this.pageCount = parseInt(this.rowCount%this.absolute == 0

? this.rowCount/this.absolute : this.rowCount/this.absolute+1);

}catch(exception){}

this.__updateTableRows__();

};

/**//*

下一页

*/

Page.prototype.nextPage = function(){

if(this.pageIndex + 1 < this.pageCount){

this.pageIndex += 1;

this.__updateTableRows__();

}

};

/**//*

上一页

*/

Page.prototype.prePage = function(){

if(this.pageIndex >= 1){

this.pageIndex -= 1;

this.__updateTableRows__();

}

};

/**//*

首页

*/

Page.prototype.firstPage = function(){

if(this.pageIndex != 0){

this.pageIndex = 0;

this.__updateTableRows__();

}

};

/**//*

尾页

*/

Page.prototype.lastPage = function(){

if(this.pageIndex+1 != this.pageCount){

this.pageIndex = this.pageCount - 1;

this.__updateTableRows__();

}

};

/**//*

页定位方法

*/

Page.prototype.aimPage = function(iPageIndex){

if(iPageIndex > this.pageCount-1){

this.pageIndex = this.pageCount - 1;

}else if(iPageIndex < 0){

this.pageIndex = 0;

}else{

this.pageIndex = iPageIndex;

}

this.__updateTableRows__();

};

/**//*

执行分页时，更新显示表格内容

*/

Page.prototype.__updateTableRows__ = function(){

var iCurrentRowCount = this.absolute * this.pageIndex;

var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;

var tempRows = this.__cloneRows__();

//alert(tempRows === this.dataRows);

//alert(this.dataRows.length);

var removedTBody = this.__oTable__.removeChild(this.__oTBody__);

var newTBody = document.createElement("TBODY");

newTBody.setAttribute("id", this.tBodyId);

for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){

newTBody.appendChild(tempRows[i]);

}

this.__oTable__.appendChild(newTBody);

/**//*

this.dataRows为this.oTBody的一个引用，

移除this.oTBody那么this.dataRows引用将销失,

code:this.dataRows = tempRows;恢复原始操作行集合.

*/

this.__dataRows__ = tempRows;

this.__oTBody__ = newTBody;

//alert(this.dataRows.length);

//alert(this.absolute+iCurrentRowCount);

//alert("tempRows:"+tempRows.length);

};

/**//*

克隆原始操作行集合

*/

Page.prototype.__cloneRows__ = function(){

var tempRows = [];

for(var i=0; i<this.__dataRows__.length; i++){

/**//*

code:this.dataRows[i].cloneNode(param),

param = 1 or true:复制以指定节点发展出去的所有节点,

param = 0 or false:只有指定的节点和它的属性被复制.

*/

tempRows[i] = this.__dataRows__[i].cloneNode(1);

}

return tempRows;

};

例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" language="javascript">

window.onload = function(){

page = new Page(3,'table1','group_one'); };

</script>

</head>

<body>

<table id="table1" border="0" width="486">

<thead>

<tr style="background-color:#CCCCCC;">

<th style="cursor:pointer;">Last Name</th>

<th style="cursor:pointer;">First Name</th>

<th style="cursor:pointer;">Birthday</th>

<th style="cursor:pointer;">Siblings</th>

</tr>

</thead>

<tbody id="group_one">

<tr style="background-color:#f3f3f3">

<td>Smith</td>

<td>John</td>

<td>7/12/1978</td>

<td>2</td>

</tr>

<tr style="background-color:#B4D6FC">

<td>Johnson</td>

<td>Betty</td>

<td>10/15/1977</td>

<td>4</td>

</tr>

<tr style="background-color:#f3f3f3">

<td>Henderson</td>

<td>Nathan</td>

<td>2/25/1949</td>

<td>1</td>

</tr>

<tr style="background-color:#B4D6FC">

<td>Williams</td>

<td>James</td>

<td>7/8/1980</td>

<td>4</td>

</tr>

<tr style="background-color:#f3f3f3">

<td>Gilliam</td>

<td>Micheal</td>

<td>7/22/1949</td>

<td>1</td>

</tr>

<tr style="background-color:#f3f3f3">

<td>Smith</td>

<td>John</td>

<td>7/12/1978</td>

<td>2</td>

</tr>

<tr style="background-color:#B4D6FC">

<td>Johnson</td>

<td>Betty</td>

<td>10/15/1977</td>

<td>4</td>

</tr>

<tr style="background-color:#f3f3f3">

<td>Henderson</td>

<td>Nathan</td>

<td>2/25/1949</td>

<td>1</td>

</tr>

<tr style="background-color:#B4D6FC">

<td>Williams</td>

<td>James</td>

<td>7/8/1980</td>

<td>4</td>

</tr>

<tr style="background-color:#f3f3f3">

<td>Gilliam</td>

<td>Micheal</td>

<td>7/22/1949</td>

<td>1</td>

</tr>

</tbody>

</table>

<span id="s"></span>

<table>
<tr>
<td><a href="#" onclick="page.nextPage();">下一页</a></td>
<td><a href="#" onclick="page.prePage();">上一页</a></td>
<td><span id="pageindex"></span></td>
</tr>
</table>

</body>

</html>

一个重构的js分页类的更多相关文章

一个简单的php分页类代码(转载)
入门级php分页类原文地址:http://www.xfcodes.com/php/fenye/3608.htm 时间:2015-12-16 20:52:00来源:网络 php分页类. 复制代码代码如 ...
一个简单的CI分页类
[php] view plaincopy <span style="font-size:16px;">/** * * 关于页码有效性的判断需要加在控制器中判断,即当 ...
非常不错的一个JS分页效果代码
这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...
分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
分享非常好用的前端分页js工具类灵活简单易懂
分享自己封装的前端分页js工具类下面是默认样式效果截图可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
自己写的一个ASP.NET服务器控件Repeater和GridView分页类
不墨迹,直接上代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...
php部分---一个分页类、用法
1.分页类 <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 privat ...
用PHP写的一个简单的分页类 1.0版
<?php /* 分页类用于实现对多条数据分页显示 version:1.0 author:Knight E-Mail:S.Knight.Work@gmail.com Date:2013-10- ...
customPage.class.php可添加js事件的分页类
用于ajax动态加载数据的分页类,分页事件可以动态添加,去除了a链接中的href地址. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

随机推荐

Bash简介
Bash(GNU bourne-Again Shell)是一个为GNU计划编写的Unix shell,它是很多Linux平台默认的使用的shell. shell是一个命令解析器,是介于操作系统内核与用 ...
Java 集合深入理解（10）：Deque 双端队列
点击查看 Java 集合框架深入理解系列, - ( ゜- ゜)つロ乾杯~ 什么是 Deque Deque 是 Double ended queue (双端队列) 的缩写,读音和 deck 一样,蛋 ...
HDU4897 （树链剖分+线段树）
Problem Little Devil I (HDU4897) 题目大意给定一棵树,每条边的颜色为黑或白,起始时均为白. 支持3种操作: 操作1:将a->b的路径中的所有边的颜色翻转. 操作 ...
Unity3D ShaderLab 漫反射卷积光照模型
Unity3D ShaderLab 漫反射卷积光照模型漫反射卷积[Diffuse convolution]是一个模糊立方体的过程,它保留了立方图的整体光照强度,只模糊了细节. 这种效果在我们要活得一 ...
Sublime Text 2 安装主题的方法
主题下载下载一个主题,例如: https://github.com/hyspace/st2-reeder-theme 里面起作用的文件有两个: Reeder.sublime-theme Earths ...
CrossApp 0.3.1示例编译问题解决过程
1 AlertTest.h找不到问题成因:HelloCpp工程中头文件搜索路径没有增加Classes目录,需要自己加进去.(另外由于这些文件都是在子目录中,用递归模式也行,逐个子目录添加也行) 2 ...
JavaScript substring() 方法
定义和用法 substring() 方法用于提取字符串中介于两个指定下标之间的字符. 语法 stringObject.substring(start,stop) 参数描述 start 必需.一个非负 ...
C++ Primer : 第十三章 : 拷贝控制之拷贝、赋值与销毁
拷贝构造函数一个构造函数的第一个参数是自身类类型的引用,额外的参数(如果有)都有默认值,那么这个构造函数是拷贝构造函数.拷贝构造函数的第一个参数必须是一个引用类型. 合成的拷贝构造函数在我们没 ...
C++ Primer : 第十二章 : 动态内存之allocator类
标准库allocator类定义在头文件 <memory>中.它帮助我们将内存分配和构造分离开来,它分配的内存是原始的.未构造的. 类似vector,allocator也是一个模板类,我们在 ...
DataTransfer(setData()方法)
DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据 ...

一个重构的js分页类

一个重构的js分页类的更多相关文章

随机推荐

热门专题