基于Prototype 1.6.2 框架下的数据分页

本例是基于Prototype的数据分页，能对行数，列数进行设置，列和行都是用表格进行布局，需要时根据自己的喜好进行修改。
页面导航类：

var TNavigationBar = new Class.create();
TNavigationBar.prototype = {
initialize:function(_cssPath){
this.viewObj=null;/**//*显示的位置*/
this.cssPath=_cssPath;/**//*导航样式路径*/

this.Bar=null;/**//*导航容器对象*/
this.Total=null;/**//*总数对象*/
this.PageNumber=null;/**//*页码对象*/
this.Arrow=null;/**//*导航符号对象*/
this.FirstPage=null;/**//*第一页对象*/
this.PrevPage=null;/**//*上一页对象*/
this.NextPage=null;/**//*下一页对象*/
this.Lastpage=null;/**//*最后一页对象*/

this.toPage=Prototype.emptyFunction;/**//*导航跳转页面过程*/

Common.loadCss(this.cssPath);
},
init:function(){
},
Title:{/**//*对象提示*/
First:"第一页",/**//*第一页对象提示*/
Prev:"上一页",/**//*上一页对象提示*/
Next:"下一页",/**//*下一页对象提示*/
Last:"最后一页"/**//*最后一页对象提示*/
},
Text:{/**//*导航文字*/
First:"9",/**//*第一页对象文字*/
Prev:"7",/**//*上一页对象文字*/
Next:"8",/**//*下一页对象文字*/
Last:":"/**//*最后一页文字*/
},
Template:{/**//*文字模板*/
Total:newTemplate("Total:#{Total}"),/**//*对象总数模板*/
PageNumber:newTemplate("Pages:#{CurrentPage}/#{TotalPages}")/**//*页码模板*/
},
Numberic:{/**//*导航所需要的数字*/
Total:0,/**//*对象总数*/
CurrentPage:1,/**//*当前页*/
TotalPages:0/**//*总页数*/
},
create:function(){
var_this=this;
with(_this){
Bar=newElement("DIV",{className:"pages"});
/**//*对象总数*/
Total=newElement("SPAN",{className:"count"}).update(Common.format(Template.Total,{Total:Numberic.Total}));
Bar.appendChild(Total);
/**//*页码对象*/
PageNumber=newElement("SPAN",{className:"count"}).update(Common.format(Template.PageNumber,{CurrentPage:Numberic.CurrentPage,TotalPages:Numberic.TotalPages}));
Bar.appendChild(PageNumber);
/**//*导航符号*/
Arrow=newElement("SPAN",{className:"arrow"});

FirstPage=newElement("SPAN",{title:Title.First});
if(Numberic.CurrentPage-1<1){
FirstPage.update(Text.First);
}else{
varlinks=newElement("NOBR",{className:"link"}).update(Text.First);
links.observe("click",function(){_this.toPage(1)});
FirstPage.appendChild(links);
}
Arrow.appendChild(FirstPage);

PrevPage=newElement("SPAN",{title:Title.Prev});
if(Numberic.CurrentPage-1<1){
PrevPage.update(Text.Prev);
}else{
varlinks=newElement("NOBR",{className:"link"}).update(Text.Prev);
links.observe("click",function(){_this.toPage(_this.Numberic.CurrentPage-1)});
PrevPage.appendChild(links);
}
Arrow.appendChild(PrevPage);

NextPage=newElement("SPAN",{title:Title.Next});
if(Numberic.CurrentPage+1>Numberic.TotalPages){
NextPage.update(Text.Next);
}else{
varlinks=newElement("NOBR",{className:"link"}).update(Text.Next);
links.observe("click",function(){_this.toPage(_this.Numberic.CurrentPage+1)});
NextPage.appendChild(links);
}
Arrow.appendChild(NextPage);

Lastpage=newElement("SPAN",{title:Title.Last});
if(Numberic.CurrentPage+1>Numberic.TotalPages){
Lastpage.update(Text.Last);
}else{
varlinks=newElement("NOBR",{className:"link"}).update(Text.Last);
links.observe("click",function(){_this.toPage(_this.Numberic.TotalPages)});
Lastpage.appendChild(links);
}

Arrow.appendChild(Lastpage);

Bar.appendChild(Arrow);
/**//*********************************/
viewObj.appendChild(Bar);
}
},
show:function(){
var_this=this;
Element.update(_this.viewObj);
_this.create();
}
} ;

导航效果图：

下面为数据分页类，其中包括对数据删除、添加、修改

var TPagination = new Class.create();
TPagination.prototype = {
initialize:function(){
this.viewObj=$(arguments[0])||null;
this.InstanceName="";/**//*实例名称*/
this.calls=newTCallBack();
this.imgPath="";/**//*显示图片的路径*/
this.getDataURL="";/**//*获取分页数据的路径*/

this.pageData=null;/**//*分页数据*/
this.pageHeadData=null;/**//*表格头部数据以Aarray形式，如：{"aa","bb"}*/
this.STR_FILECANTUPLOAD="文件格式不正确，不能上传！";
this.STR_EMPTYOBJECTNAME="请输入组件名称！";
this.STR_EMPTYOBJECTSORT="请从左边选择组件分类！";

this.outBgColor="";/**//*鼠标移出时的背景色*/
this.overBgColor="#e7edee";/**//*鼠标移上时的背景色*/
this.defaultFontColor="#000000";/**//*默认对象的文字颜色*/
this.fouseFontColor="#FFFFFF";/**//*选中中对象的文字颜色*/
this.selectBgColor="#0A246A";/**//*选中对象的背景色*/

this.Pages=0;/**//*总页数*/
this.CurrentPageIndex=0;/**//*当前页*/
this.PageCounts=0;/**//*每页显示个数*/
this.Cells=0;/**//*每行显示的列数*/

this.showHead=false;/**//*是否显示表格头部*/
this.showBody=true;/**//*是否显示表格体部*/
this.showFoot=true;/**//*是否显示表格脚注*/
this.showMenu=false;/**//*是否显示操作菜单，菜单包括：删除、修改*/
this.canCellDbClick=false;/**//*每列是否可以点击*/
this.CellDbClick=Prototype.emptyFunction;/**//*当canCellClick为true时，必须指定的事件*/

this.pageTable=null;/**//*分页表格模板*/
this.pageTableHead=null;/**//*分页表格头部模板*/
this.pageTableFoot=null;/**//*分页表格脚注模板*/
this.pageTableBody=null;/**//*分页表格体部模板*/
this.pageTableRow=null;/**//*分页表格行模板*/
this.pageTableCell=null;/**//*分页表格列模板*/

this.pagesTemplate=null;/**//*页码模板*/
this.linkTemplate=null;/**//*链接模板*/

this.CellTemplate=null;/**//*每列显示的模板*/

this.pageMenuItems=null;/**//*操作菜单项*/

this.SelectObj=null;/**//*选中的对象*/
this.SelectValue=null;/**//*选中的对象值*/

this.STR_FIRSTPAGE="9";/**//*第一页符号，字体为Webdings*/
this.STR_PREVPAGE="7";/**//*上一页符号，字体为Webdings*/
this.STR_NEXTPAGE="8";/**//*下一页符号，字体为Webdings*/
this.STR_LASTPAGE=":";/**//*最后一页符号，字体为Webdings*/

this.ERROR_EMPTYDATA="<center><B>此分类没有数据。</B><center>";/**//*此分类下没有数据*/
this.ERROR_EMPTYHEADDATA="请指定表格头部数据。格式如{/"aaa/",/"bbb/"}";/**//*当showHead为true时，没有表格头部数据的错误信息*/
this.ERROR_EMPTYMENUEVENTS="未指定菜单事件。";/**//*当showMenu为true时，没有指定菜单事件的错误信息*/
this.ERROR_EMPTYCELLCLICKEVENTS="未指定每列点击事件。";/**//*当canCellClick为true时，没有指定点击事件的错误信息*/

this.NavigationBar=null;/**//*导航栏*/
this.init();/**//*初始化变量*/
},
pageMenuEvents:{/**//*操作菜单事件，如果showMenu为true时，必须指定操作代码*/
Insert:Prototype.emptyFunction,
Update:Prototype.emptyFunction,
Delete:Prototype.emptyFunction
},
init:function(){
var_this=this;
this.getDataURL="";
this.getSortDataURL="";

this.Pages=0;
this.CurrentPageIndex=1;
this.PageCounts=9;
this.Cells=3;

this.showHead=false;
this.showBody=true;
this.showFoot=true;

this.CellTemplate=newTemplate('<div><center><imgsrc="#{Img}"/><br>#{Name}</center></div>');

this.NavigationBar=newTNavigationBar("http://www.cnblogs.com/App_Themes/Pagination/Pages");
this.NavigationBar.toPage=function(pageIndex){
_this.CurrentPageIndex=pageIndex;
_this.show();
}
},
initializePageTalbe:function(){
this.pageTable=newElement("TABLE",{border:"0",cellspacing:"5",cellpadding:"0",width:"100%"});

this.pageTableBody=newElement("TBODY");
this.pageTableHead=newElement("THEAD");
this.pageTableFoot=newElement("TFOOT");

this.pageTable.appendChild(this.pageTableHead);
this.pageTable.appendChild(this.pageTableBody);
this.pageTable.appendChild(this.pageTableFoot);
},
createRow:function(oObj){
var_this=this;
_this.pageTableRow=oObj.insertRow();
},
createCell:function(){/**//*生成列，参数0：创建列数，参数1：合并列数，参数2：合并行数*/
var_this=this;
vartimes=arguments[0];
varcolspan=arguments[1]==null?0:parseInt(arguments[1]);
varrowspan=arguments[2]==null?0:parseInt(arguments[2]);
for(vari=0;i<times;i++){
_this.pageTableCell=_this.pageTableRow.insertCell();
with(_this.pageTableCell){
if(colspan>0){colSpan=colspan;}
if(rowspan>0){rowSpan=rowspan;}
}
}
},
createMenu:function(){
var_this=this;
_this.pageMenuItems=[
{
name:'添加',
className:'new',
callback:function(){
try{
if(_this.pageMenuEvents.Insert==Prototype.emptyFunction)
thrownewError(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Insert();
}catch(e){
Errors.show(e);
}
}
},{
name:'修改',
className:'edit',
callback:function(){
try{
if(_this.pageMenuEvents.Update==Prototype.emptyFunction)
thrownewError(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Update(_this.SelectValue);
}catch(e){
Errors.show(e);
}
}
},{
separator:true
},{
name:'删除',
className:'delete',
callback:function(){
try{
if(_this.pageMenuEvents.Delete==Prototype.emptyFunction)
thrownewError(_this.ERROR_EMPTYMENUEVENTS);
else
_this.pageMenuEvents.Delete(_this.SelectValue);
}catch(e){
Errors.show(e);
}
}
}
];
newProto.Menu({
selector:'#'+_this.viewObj.id,
className:'menudesktop',
menuItems:_this.pageMenuItems
});
},
mouseOver:function(objNode){
var_this=this;
objNode.setStyle({backgroundColor:_this.overBgColor,color:_this.defaultFontColor});
},
mouseOut:function(objNode){
var_this=this;
objNode.setStyle({backgroundColor:_this.outBgColor});
},
showCell:function(strCell){
var_this=this;
return_this.CellTemplate.evaluate(strCell);
},
show:function(){
var_this=this;
varJSON=_this.pageData;
_this.initializePageTalbe();
_this.viewObj.update();
if(JSON==null){
/**//*****分类数据为空************/
_this.createRow(_this.pageTableBody);
_this.createCell(1);
Element.update(_this.pageTableCell,_this.ERROR_EMPTYDATA);
_this.viewObj.appendChild(_this.pageTable);
return;
}
if(_this.showMenu)_this.createMenu();
_this.Pages=Math.floor(JSON.Table.size()/_this.PageCounts)+(JSON.Table.size()%_this.PageCounts>0?1:0);/**//*计算总页数*/
/**//*****生成表格头部*****/
if(_this.showHead){
if(_this.pageHeadData!=null){
_this.createRow(_this.pageTableHead);
_this.pageHeadData.each(function(value,index){
_this.createCell(1);
Element.update(_this.pageTableCell,value);
});
}else{
thrownewError(_this.ERROR_EMPTYHEADDATA);
}
}
/**//*****生成数据主体******/
_this.createRow(_this.pageTableBody);
JSON.Table.each(function(value,index){
varstartIndex=_this.CurrentPageIndex==1?1:(_this.CurrentPageIndex-1)*_this.PageCounts+1;
varendIndex=_this.CurrentPageIndex*_this.PageCounts;
if((index+1)>=startIndex&&(index+1)<=endIndex){
with(value){
_this.createCell(1);

Event.observe(_this.pageTableCell,"mouseover",function(){
varsObj=Event.findElement(event,"TD");
_this.mouseOver(sObj);
});
Event.observe(_this.pageTableCell,"mouseout",function(){
varsObj=Event.findElement(event,"TD");
if(_this.SelectObj!=sObj)
_this.mouseOut(sObj);
});
Event.observe(_this.pageTableCell,"mousedown",function(event){
if(event.button==1)return;
if(_this.SelectObj!=null)_this.SelectObj.setStyle({backgroundColor:"",color:_this.defaultFontColor});
_this.SelectObj=Event.findElement(event,'TD');
_this.SelectObj.setStyle({backgroundColor:_this.selectBgColor,color:_this.fouseFontColor});
_this.SelectValue=value;
});
if(_this.canCellDbClick){
Event.observe(_this.pageTableCell,"dblclick",function(event){
varsObj=Event.findElement(event,'TD');
sObj.setStyle({backgroundColor:_this.selectBgColor,color:_this.fouseFontColor});
try{
if(_this.CellDbClick==Prototype.emptyFunction)
thrownewError(_this.ERROR_EMPTYCELLCLICKEVENTS);
else
_this.CellDbClick(value);
}catch(e){
Errors.show(e);
}
});
}

varstrCell={
Img:_this.imgPath+Goods_smallpic,
Name:Goods_name
};
Element.update(_this.pageTableCell,_this.showCell(strCell));
if((index+1)%(_this.Cells)==0){
_this.createRow(_this.pageTableBody);
}
}
}
});
if(JSON.Table.size()%_this.Cells>0){
_this.createCell(JSON.Table.size()%_this.Cells-1);
}
/**//*****生成脚注页码*****/
if(_this.showFoot){
_this.createRow(_this.pageTableFoot);
_this.createCell(1,_this.Cells);

with(_this.NavigationBar){
viewObj=_this.pageTableCell;
Numberic.Total=JSON.Table.size();
Numberic.CurrentPage=_this.CurrentPageIndex;
Numberic.TotalPages=_this.Pages;
show();
}
}
/**//******************/
_this.viewObj.appendChild(_this.pageTable);

},
toPage:function(pageIndex){
var_this=this;
_this.CurrentPageIndex=pageIndex;
_this.show();
},
callGet:function(param){
var_this=this;
_this.calls.Path=_this.getDataURL;
_this.calls.Method="post";
_this.calls.onSuccess=function(JSON){
_this.pageData=JSON;
try{
_this.CurrentPageIndex=1;
_this.show();
}catch(e){
Errors.show(e);
}
};
_this.calls.Call(param);
},
getData:function(sortIndex){
var_this=this;
PostParameters.Clear();
with(PostParameters.Add()){
DataType=getSqlDbType("varchar");
Direction=getDirection("Input");
FieldName="GoodsSortID";
Size=255;
Value=sortIndex;
RunType=getRunType("Proc");
}
_this.callGet(PostParameters.toJSON());
}
}

后台数据说明：本例使用的数据格式都为JSON，而在对数据进行操作时用到了基于Prototype的 Proto.Menu，下载地址：http://yura.thinkweb2.com/scripting/contextMenu/