• 一个重构的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>
  • 相关阅读:
    Hibernate(九)HQL查询
    Hibernate(八)多对多映射
    Hibernate(七)一对一映射
    Hibernate(六)一对多映射(多对一)
    Hibernate(五)基本数据类型
    Hibernate(四)结构-基础语义和事务
    Hibernate(三)结构-配置文件-实体映射及配置文件
    Hibernate框架简介(二)基本使用增、删、改、查
    Hibernate生成实体类-手工写法(一)
    Java从零开始学四十(反射简述一)
  • 原文地址:https://www.cnblogs.com/shaohz2014/p/3890713.html
Copyright © 2020-2023  润新知