当前位置:编程学习 > JAVA >>

非常简单的兼容多浏览器Javascript实现分页功能


首先,创建一个page.js文件,实现客户端分页的功能,代码如下:

[javascript] 
/*
* 客户端分页类
* @pageSize 每页显示记录数
* @tableID  分页表格ID
* @tbodyID  分页表格TBODY的ID
*/ 
 
/*
构造
*/ 
function PagingClass(pageSize,tableID,tbodyID) { 
    this._pageSize = pageSize; //每页最大记录数 
    this._tableId = tableID; 
    this._tBodyId = tbodyID; 
    this._rowCount = 0;//记录数 
    this.pageCount = 0;//页数 
    this.pageIndex = 0;//页索引 
    this._curTable = null;//表格引用 
    this._curTBody = null;//要分页内容 
    this._curRows = 0;//记录行引用 
    this._oldTBody = null; 
    this._initPaging(); //初始化; 
}; 
 
/*
初始化
*/ 
 
PagingClass.prototype._initPaging = function(){ 
    this._curTable = document.getElementById(this._tableId); 
    this._curTBody = this._curTable.tBodies[this._tBodyId]; 
    this._curRows = this._curTBody.rows; 
    this._rowCount = this._curRows.length; 
    try{ 
        this._pageSize = (this._pageSize <= 0) || (this._pageSize>this._rowCount) ? this._rowCount : this._pageSize;  
        this.pageCount = parseInt(this._rowCount%this._pageSize == 0 ? this._rowCount/this._pageSize : this._rowCount/this._pageSize+1); 
    } catch(exception){} 
 
    this._updateTableRows_(); 
}; 
 
/*
下一页
*/ 
PagingClass.prototype.nextPage = function(){ 
    if(this.pageIndex + 1 < this.pageCount){ 
        this.pageIndex += 1; 
        this._updateTableRows_(); 
    } 
}; 
 
/*
上一页
*/ 
PagingClass.prototype.prePage = function(){ 
    if(this.pageIndex >= 1){ 
        this.pageIndex -= 1; 
        this._updateTableRows_(); 
    } 
}; 
 
/*
首页
*/ 
PagingClass.prototype.firstPage = function(){ 
    if(this.pageIndex != 0){ 
        this.pageIndex = 0; 
        this._updateTableRows_(); 
    }  
}; 
 
/*
尾页
*/ 
PagingClass.prototype.lastPage = function(){ 
    if(this.pageIndex+1 != this.pageCount){ 
        this.pageIndex = this.pageCount - 1; 
        this._updateTableRows_(); 
    } 
}; 
 
/*
页定位方法
*/ 
PagingClass.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_(); 
}; 
 
/*
执行分页时,更新显示表格内容
*/ 
 
PagingClass.prototype._updateTableRows_ = function(){ 
    var iCurrentRowCount = this._pageSize * this.pageIndex; 
    var iMoreRow = this._pageSize+iCurrentRowCount > this._rowCount ? this._pageSize+iCurrentRowCount - this._rowCount : 0; 
    var tempRows = this._cloneRows_(); 
    var removedTBody = this._curTable.removeChild(this._curTBody); 
    var newTBody = document.createElement("TBODY"); 
    newTBody.setAttribute("id", this._tBodyId); 
 
    for(var i=iCurrentRowCount; i < this._pageSize+iCurrentRowCount-iMoreRow; i++){ 
        newTBody.appendChild(tempRows[i]); 
    } 
     
    this._curTable.appendChild(newTBody); 
 
    this._curRows = tempRows; 
    this._curTBody = newTBody; 
}; 
 
/*
克隆原始操作行集合
*/ 
PagingClass.prototype._cloneRows_ = function(){ 
    var tempRows = []; 
    for(var i=0; i<this._curRows.length; i++){ 
        tempRows[i] = this._curRows[i].cloneNode(1); 
    } 
    return tempRows; 
}; 

然后,创建一个html页面,比如:
[html] 
<table class="base_table" id="tbSeatList"> 
    <thead> 
 
        <tr> 
            <th> 
                航空公司 
            </th> 
            <th> 
                航线 
            </th> 
            <th> 
                价格 
            </th> 
 
            <th> 
                航班日期 
            </th> 
            <th> 
                放位时间 
            </th> 
            <th> 
                航班号 
            </th> 
            <th> 
 
  &n

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,