有个最新版的代码,分享给大家,也是几年前写的东西了 Sonny Li 2011-11-15 00:57
function $el(el) {
return document.createElement(el);
}
function $ap(p, n) {
p = p || document;
p.appendChild(n);
}
function $id(_id) {
return document.getElementById(_id);
}
(function(){
var _style = $el("link");
_style.href = "jpage.css";
_style.rel = "stylesheet";
_style.type = "text/css";
document.getElementsByTagName("HEAD").item(0).appendChild(_style);
})();
/**
* fun: 实现ajax分页效果
* 参数说明:c 分页控件显示的容器ID,一般用DIV的ID
* recordCount: 总记录数
* service 请求分页数据的js方法指针,分页控件负责回调, 原型 function fun(curPage, pageSize) {....}
*/
function JPage(c, recordCount, service, pageSize, group) {
this._c = $id(c);
this.pageSize = pageSize || 10; //一页几条
this.pageCount = (recordCount % this.pageSize) == 0? (recordCount / this.pageSize): parseInt((recordCount / this.pageSize) + 1); //总页数
this.service = service; //回调方法
this.group = group || 11; //一组几页
this.pageData = new Array(this.group); //当前要显示的页对象索引缓存区
this.curPage = 1; // 初始化为第一页为当前页
var that = this;
this.pageEvt = function(thePg) {
this.curPage = thePg;
this.service(this.curPage, this.pageSize);
this.render();
};
this.render = function() {
this._c.innerHTML = "";
if(recordCount == 0) return;
this.createFirstPage();
this.readData(); //准备分页索引
this.createPrePage();
this.createPages();
this.createNextPage();
this.createEndPage();
};
this.createEndPage = function() {
var _span = $el("span");
var epg = new FEPg(this, this.pageCount, "EndCssClass"); //最后一页
$ap(_span, epg.getView());
$ap(this._c, _span);
};
this.createFirstPage = function() {
var _span = $el("span");
var fpg = new FEPg(this, 1, "FirstCssClass"); //首页
$ap(_span, fpg.getView());
$ap(this._c, _span);
};
this.createPages = function() {
for(var n = 0; n < this.group; n++) {
if(this.pageData[n] == -2) break; //
var _span = $el("span");
var _page = new Pg(this, this.pageData[n]);
$ap(_span, _page.getView());
$ap(this._c, _span);
}
};
this.createPrePage = function() {
var preSpan = $el("span");
var prePage = new PrePg(this, this.curPage - 1);
$ap(preSpan, prePage.getView());
$ap(this._c, preSpan);
};
this.createNextPage = function() {
var nextSpan = $el("span");
var nextPage = new NextPg(this, this.curPage + 1);
$ap(nextSpan, nextPage.getView());
$ap(this._c, nextSpan);
};
this.readData = function() {
for(var i = 0; i < this.group; i++) this.pageData[i] = -2;
var firstIndex = (this.pageCount <= this.group || this.curPage <= parseInt(this.group / 2))? 1: this.curPage - parseInt(this.group / 2);
if(firstIndex > this.pageCount) return;
this.pageData[0] = firstIndex;
for(var n = 1; n < this.group; n++) {
if(this.pageData[n-1] >= this.pageCount) break;
this.pageData[n] = this.pageData[n-1] + 1;
}
};
this.render();
}
/**
* fun: 页模型基类
* 参数说明:owner分页对象,the 当前页索引, pre 上一页索引, _next 下一页索引, vtxt 显示文本(用于“上一页”及“下一页”)
*/
function Pg(owner, the, vtxt) {
this._owner = owner;
this._self = the;
this._vtxt = vtxt || the;
this._view = $el("a");
this._view.innerHTML = this._vtxt;
var that = this;
this.getView = function() {
if(this._self == this._owner.curPage) {this._view.className = "activePage"; return this._view; }
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
return this._view;
};
this.getMe = function() {
return this._self;
};
}
/**
* fun: Pg子类"上一页“类模型
*/
function PrePg(owner, the, vtxt) {
this._super = Pg;
this._super(owner, the, " "); //当前页为第一页时,the为0
var that = this;
this.getView = function() {
if(this._self == 0) { this._view.className = "NoView"; return this._view; } //如果当前页为第一页,不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = "PreCssClass";
return this._view;
};
}
/**
* fun: Pg子类"下一页”类模型
*/
function NextPg(owner, the, vtxt) {
this._super = Pg;
this._super(owner, the, " ");
var that = this;
this.getView = function() {
if(this._self == this._owner.pageCount + 1) { this._view.className = "NoView"; return this._view; } //如果当前页为第一页,不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = "NextCssClass";
return this._view;
};
}
/**
* fun: 第一页及最后一页类模型
*/
function FEPg(owner, the, _class) {
this._super = Pg;
this._super(owner, the, " ");
var that = this;
this.getView = function() {
if(this._owner.pageCount == 0) { return this._view; } //如果当前页为第一页,不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = _class;
return this._view;
}
}