基于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",  "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/