html通用客户端,用javascript实现较为通用的客户端分页组件

2011-11-15 00:57 | Sonny Li

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;

}

}  回复  更多评论