基于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: new Template("Total: #{Total}"), /**//*对象总数模板*/




PageNumber: new Template("Pages: #{CurrentPage} / #{TotalPages}") /**//*页码模板*/


},




Numberic:

{ /**//*导航所需要的数字*/




Total: 0, /**//*对象总数*/




CurrentPage: 1, /**//*当前页*/




TotalPages: 0 /**//*总页数*/


},




create: function()

{


var _this = this;




with(_this)

{




Bar = new Element("DIV",

{className: "pages"});




/**//*对象总数*/




Total = new Element("SPAN",

{className: "count"}).update(Common.format(Template.Total,

{Total: Numberic.Total}));


Bar.appendChild(Total);




/**//*页码对象*/




PageNumber = new Element("SPAN",

{className: "count"}).update(Common.format(Template.PageNumber,

{CurrentPage: Numberic.CurrentPage, TotalPages: Numberic.TotalPages}));


Bar.appendChild(PageNumber);




/**//*导航符号*/




Arrow = new Element("SPAN",

{className: "arrow"});






FirstPage = new Element("SPAN",

{title: Title.First});




if (Numberic.CurrentPage - 1 < 1 )

{


FirstPage.update(Text.First);




}else

{




var links = new Element("NOBR",

{className: "link"}).update(Text.First);




links.observe("click", function()

{_this.toPage(1)});


FirstPage.appendChild(links);


}


Arrow.appendChild(FirstPage);






PrevPage = new Element("SPAN",

{title: Title.Prev});




if (Numberic.CurrentPage - 1 < 1 )

{


PrevPage.update(Text.Prev);




}else

{




var links = new Element("NOBR",

{className: "link"}).update(Text.Prev);




links.observe("click", function()

{_this.toPage(_this.Numberic.CurrentPage - 1)});


PrevPage.appendChild(links);


}


Arrow.appendChild(PrevPage);






NextPage = new Element("SPAN",

{title: Title.Next});




if (Numberic.CurrentPage + 1 > Numberic.TotalPages )

{


NextPage.update(Text.Next);




}else

{




var links = new Element("NOBR",

{className: "link"}).update(Text.Next);




links.observe("click", function()

{_this.toPage(_this.Numberic.CurrentPage + 1)});


NextPage.appendChild(links);


}


Arrow.appendChild(NextPage);






Lastpage = new Element("SPAN",

{title: Title.Last});




if (Numberic.CurrentPage + 1 > Numberic.TotalPages )

{


Lastpage.update(Text.Last);




}else

{




var links = new Element("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 = new TCallBack();




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 = new Template('<div><center><img src="#{Img}"/><br>#{Name}</center></div>');




this.NavigationBar = new TNavigationBar("http://www.cnblogs.com/App_Themes/Pagination/Pages");




this.NavigationBar.toPage = function(pageIndex)

{


_this.CurrentPageIndex = pageIndex;


_this.show();


}


},




initializePageTalbe: function()

{




this.pageTable = new Element("TABLE",

{border: "0", cellspacing: "5", cellpadding: "0", width: "100%"});




this.pageTableBody = new Element("TBODY");


this.pageTableHead = new Element("THEAD");


this.pageTableFoot = new Element("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;


var times = arguments[0];


var colspan = arguments[1] == null ? 0 : parseInt(arguments[1]);


var rowspan = arguments[2] == null ? 0 : parseInt(arguments[2]);




for (var i = 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)


throw new Error(_this.ERROR_EMPTYMENUEVENTS);


else


_this.pageMenuEvents.Insert();




}catch(e)

{


Errors.show(e);


}


}




},

{


name: '修改',


className: 'edit',




callback: function()

{




try

{


if (_this.pageMenuEvents.Update == Prototype.emptyFunction)


throw new Error(_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)


throw new Error(_this.ERROR_EMPTYMENUEVENTS);


else


_this.pageMenuEvents.Delete(_this.SelectValue);




}catch(e)

{


Errors.show(e);


}


}


}


];




new Proto.Menu(

{


selector: '#'+_this.viewObj.id,


className: 'menu desktop',


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;


var JSON = _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

{


throw new Error(_this.ERROR_EMPTYHEADDATA);


}


}




/**//*****生成数据主体******/


_this.createRow(_this.pageTableBody);




JSON.Table.each(function(value, index)

{


var startIndex = _this.CurrentPageIndex == 1 ? 1 : (_this.CurrentPageIndex - 1)*_this.PageCounts + 1;


var endIndex = _this.CurrentPageIndex * _this.PageCounts;




if ((index+1) >= startIndex && (index+1) <= endIndex )

{




with(value)

{


_this.createCell(1);






Event.observe(_this.pageTableCell, "mouseover", function()

{


var sObj = Event.findElement(event, "TD");


_this.mouseOver(sObj);


});




Event.observe(_this.pageTableCell, "mouseout", function()

{


var sObj = 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)

{


var sObj = Event.findElement(event, 'TD');




sObj.setStyle(

{backgroundColor: _this.selectBgColor, color: _this.fouseFontColor});




try

{


if (_this.CellDbClick == Prototype.emptyFunction)


throw new Error(_this.ERROR_EMPTYCELLCLICKEVENTS);


else


_this.CellDbClick(value);




}catch(e)

{


Errors.show(e);


}


});


}






var strCell =

{


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/