JavaScript分页功能的实现方法

前端之家收集整理的这篇文章主要介绍了JavaScript分页功能的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JavaScript分页功能实现方法分享给大家供大家参考。具体实现方法如下:

//定义page为全局变量,以便下面使用 var page; window.onload = function() { var table = document.getElementById("table"); var btnAdd = document.getElementById("btnAdd"); var btnModify = document.getElementById("btnModify"); var btnDel = document.getElementById("btnDel"); var btnRefresh = document.getElementById("btnRefresh"); var headCheck = document.getElementById("headCheck"); //定义每页的页数及初始化table和tbody的id page = new Page(5,'table','sTBodyId'); //初始加载init方法 page.__init__(); //初始更新表格 page.__updateTableRows__(); } //下面的所有方法,均写到window.onload之外,否则运行有问题 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; } //初始化 Page.prototype.__init__ = function() { //获取table引用 this.__oTable__ = document.getElementById(this.tableId); //获取tBody引用 this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; //获取tbody的行 this.__dataRows__ = this.__oTBody__.rows; //获取tbody的总行数 this.rowCount = this.__dataRows__.length; try { //判断初始化时每页显示的数据条数,如果定义的值<0或者定义的值>本来就有的行数,那么初始化时显示本来的行数,否则为当前定义的行数 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) { } } //下一页 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() {
//pageIndex初始化时为0
//每页显示的数据当前页的索引
var iCurrentRowCount = this.absolute
this.pageIndex;
//如果截止到当前页的所有数据+每页显示的数据>总数据条数,则还需要显示this.absolute+ iCurrentRowCount - this.rowCount这些数据,否则,显示0条数据
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);
    //将tbody从table中移除
    var removedTBody = this.oTable.removeChild(this.oTBody);
    //重新创建tbody
    var newTBody = document.createElement("TBODY");
    //给他赋一个id值,为原来的id值
    newTBody.setAttribute("id",this.tBodyId);
    for (var i = iCurrentRowCount; i < this.absolute + iCurrentRowCount