非常简单的兼容多浏览器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>
放位数量
</th>
<th>
记录编号
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="bodyPaging">
<tr>
<td>
中国东方航空公司
</td>
<td>
北京
→
上海
</td>
<td>
<span class="base_price"><dfn>¥</dfn>339</span>
</td>
<td>
2012-07-12
</td>
<td>
2012-06-26 13:28
</td>
<td>
MU8888
</td>
<td>
2
</td>
<td>
GBDDEE
</td>
<td>
<a target="_blank" href="">
查看</a>
</td>
</tr>
<tr>
<td>
中国东方航空公司
</td>
<td>
上海
→
成都
</td>
<td>
<span class="base_price"><dfn>¥</dfn>400</span>
</td>
<td>
2012-07-09
</td>
<td>
2012-06-26 13:25
</td>
<td>
MU3333
</td>
<td>
3
</td>
<td>
EFGDE
</td>
<td>
<a target="_blank" href="">
查看</a>
</td>
</tr>
<tr>
<td>
中国东方航空公司
</td>
<td>
上海
→
成都
</td>
<td>
<span class="base_price"><dfn>¥</dfn>400</span>
</td>
<td>
2012-07-12
</td>
<td>
2012-06-26 13:23
</td>
<td>
MU2345
</td>
<td>
2
</td>
<td>
PNR012
</td>
<td>
<a target="_blank" href="">
查看</a>
</td>
</tr>
<tr>
<td>
中国东方航空公司
</td>
<td>
乌鲁木齐
→
哈尔滨
</td>
<td>
<span class="base_price"><dfn>¥</dfn>360</span>
</td>
<td>
2012-07-25
</td>
<td>
2012-06-26 11:28
</td>
<td>
mu0725
</td>
<td>
3
</td>
<td>
123
</td>
<td>
<a target="_blank" href="">
查看</a>
</td>
</tr>
<tr>
<td>
中国东方航空公司
</td>
<td>
乌鲁木齐
→
哈尔滨
</td>
<td>
<span class="base_price"><dfn>¥</dfn>360</span>
</td>
<td>
2012-07-03
</td>
<td>
2012-06-26 11:06
</td>
<td>
mu0703
</td>
<td>
2
</td>
<td>
12
</td>
<td>
<a target="_blank" href="">
查看</a>
</td>
</tr>
</tbody>
</table>
<br />
<div style="float:right;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="javascript:void(0)" onclick="prePage();" style="color: Black;">上一页</a>
</td>
<td>
<span id="pageindex" style="font-weight: bold;"></span>
</td>
<td>
<a href="javascript:void(0)" onclick="nextPage();" style="color: Black;">下一页</a>
</td>
</tr>
</table>
</div>
最后，页面的head部分添加以下js，调用分页功能：
[javascript]
<script type="text/javascript" src="../JS/page.js"></script>
<script type="text/javascript" language="javascript">
var page;
window.onload = function () {
if (document.getElementById('tbSeatList')) {
page = new PagingClass(15, 'tbSeatList', 'bodyPaging');
document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;
}
};
function nextPage() {
page.nextPage();
document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;
}
function prePage() {
page.prePage();
document.getElementById('pageindex').innerHTML = page.pageIndex + 1 + ' / ' + page.pageCount;
}
</script>
作者：keepitshortandsimple
