兼容多浏览器Javascript实现分页功能
2014-05-14 14:48
615 查看
首先，创建一个page.js文件，实现客户端分页的功能，代码如下：
[javascript]
view plaincopyprint?
/*
* 客户端分页类
* @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.proto
4000
type._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]
view plaincopyprint?
<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]
view plaincopyprint?
<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>
[javascript]
view plaincopyprint?
/*
* 客户端分页类
* @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.proto
4000
type._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;
};
/*
* 客户端分页类
* @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]
view plaincopyprint?
<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>
<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]
view plaincopyprint?
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 非常简单的兼容多浏览器Javascript实现分页功能
- IE8等不支持placeholder，通过javascript实现此功能，能够兼容多种浏览器
- JavaScript 实现完美兼容多浏览器的复制功能代码
- JavaScript 实现完美兼容多浏览器的复制功能代码
- 开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）
- 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能
- 简单几步原生javascript实现元素拖拽功能兼容所有浏览器
- JS、Flash 实现复制功能 （浏览器兼容）
- 巧用注释实现不支持javascript的浏览器功能优雅降级
- ZeroClipboard 完美实现复制粘贴功能、跨浏览器兼容
- javascript 兼容所有浏览器的DOM扩展功能
- JavaScript实现弹出遮盖拖动层（不穿过浏览器边缘，兼容IE、FF）
- 通过javascript实现table表格排序分页功能（转）
- JavaScript实现本地图片上传预览功能（兼容IE、chrome、FF）
- JavaScript 复制功能代码 兼容多浏览器
- JavaScript 复制功能代码 兼容多浏览器
- ZeroClipboard实现复制功能(兼容各浏览器终极解决办法)
- JavaScript实现兼容所有浏览器实现复制到剪贴板
- JavaScript实现浏览器菜单的一些功能
- javascript 复制功能 兼容所有浏览器的解决方案