JS分页程序详解

/***************************************************/ 
      var pageFunc=function(){ 
        //alert('here'); 
        var _this=this; 
        this.render=function(arr){//模拟类的抽象函数 
            throw new Error('该函数不能为空'); 
            } 
        this.renderButton=function(){//模拟类的抽象函数 
            throw new Error('该函数不能为空'); 
            } 
        this.bindEvent=function(){//模拟类的抽象函数 
            throw new Error('该函数不能为空'); 
            } 
        this.init=function(){ 
            throw new Error('该函数不能为空'); 
            } 
        this.getChangePage=function(){ 
            throw new Error('该函数不能为空'); 
            } 
        this.getPages=function(){ 
            return 0; 
            } 
        this.pages=_this.getPages(); 
        this.currentPage=1; 
        this.pageSize=3; 
        this.getNextPage=function(){ 
            var _nextPage=_this.currentPage+1; 
            if(_nextPage>=_this.pages){ 
                    _nextPage=_this.pages; 
                } 
            return _nextPage; 
            } 
        this.getPreviousPage=function(){ 
            var _previousPage=1; 
            _previousPage=_this.currentPage-1; 
            if(_previousPage<=0){ 
                    _previousPage=1; 
                } 
            return _previousPage; 
            } 
        this.gotoPage=function(pageNum){ 
                if(pageNum!=_this.currentPage){ 
                    var _arr=''; 
                    _arr=[]; 
                    _arr['start']=pageNum-1; 
                    _arr['len']=_this.pageSize; 
                    _this.render(_arr); 
                    _this.currentPage=pageNum; 
                    _this.getChangePage(); 
                    //alert(pageNum); 
                } 
            } 
        this.gotoFirstPage=function(){ 
                //alert('gotoFirstPage'); 
                //alert(_arr['start']); 
                _this.gotoPage(1); 
            } 
        this.gotoLastPage=function(){ 
                _this.gotoPage(_this.pages);     
            } 
        this.gotoNextPage=function(){ 
            var _nextPage=_this.currentPage+1; 
            if(_nextPage>_this.pages){ 
                _nextPage=_this.pages; 
                } 
            _this.gotoPage(_nextPage); 
            } 
        this.gotoPreviousPage=function(){ 
            var _previousPage=_this.currentPage-1; 
            if(_previousPage<1){ 
                _previousPage=1 
                } 
            _this.gotoPage(_previousPage); 
            } 
        this.run=function(){ 
            _this.pages=_this.getPages(); 
            _this.currentPage=1; 
            _this.renderButton(); 
            _this.render({start:1,len:_this.pageSize}); 
            } 
    } 
     
/***************************************************/    
         //alert($('div[calss=pages]').html()); 
    var page=new pageFunc(); 
    page.pageSize=3; 
    page.init=function(){ 
        $('.pages').children().css('cursor','pointer'); 
        } 
    page.render=function(arr){//arr['start'],arr['len'] 
            $('.itemDl').children().slideUp(100); 
            //console.log(arr['len']); 
            $('.itemDl').children().slice(arr['start'],arr['start']+arr['len']).slideDown(1000); 
            //console.log($('.itemDl').siblings().slice(arr['start'],arr['start']+arr['len']).length); 
            //alert($('.itemDl').find('dd').length); 
        } 
    page.bindEvent=function(){ 
            var _this=this; 
            _this.init(); 
            $('.pages li[rel=firstPage]').live('click',function(e){ 
                //alert('firstPage'); 
                _this.gotoFirstPage(); 
                }); 
            $('.pages li[rel=lastPage]').live('click',function(e){ 
                _this.gotoLastPage(); 
                }); 
            $('.pages li[rel=previousPage]').live('click',function(e){ 
                _this.gotoPreviousPage(); 
                }); 
            $('.pages li[rel=nextPage]').live('click',function(e){ 
                _this.gotoNextPage(); 
                }); 
            $('.pages').find('li').each(function(index){ 
                var _that=$(this); 
                var _rel=_that.attr('rel'); 
                if(_rel!='firstPage'&&_rel!='previousPage'&&_rel!='nextPage'&&_rel!='lastPage'&&_rel!='total'&&_rel!='gotoPage'){ 
                    _that.live('click',function(e){ 
                        _this.gotoPage(_rel); 
                        }); 
                    } 
                }); 
            $('.pages select').live('change',function(e){ 
                //alert(e.type); 
                var _pageNum=$(this).val(); 
                _this.gotoPage(_pageNum); 
                }); 
        } 
    page.renderButton=function(){ 
            $('.pages').html(''); 
            var _totalPages=this.pages; 
            var _nowPage=this.currentPage; 
            var _listButton=''; 
            var _listSelect=''; 
            for(var i=0;i<_totalPages;i++){ 
                _listButton+='<li rel="'+(i+1)+'">'+(i+1)+'</li>'; 
                _listSelect+='<option>'+(i+1)+'</option>'; 
                } 
            var _content='<form><ul class="pagelist"><li rel="firstPage" class="firstpage">首页</li><li rel="previousPage">上一页</li>'+_listButton+'<li rel="nextPage">下一页></li><li rel="lastPage">末页</li><li rel="total">共'+_totalPages+'页/第'+_nowPage+'页</li><li rel="gotoPage" class="pagelast">跳到<select class="pagesxz" name="gotoPage">'+_listSelect+'</select> 页</li></ul></form>'; 
            $('.pages').html(_content); 
                         //alert(_content); 
            //document.write(_content); 
            this.bindEvent(); 
        } 
    page.getPages=function(){ 
        var _len=parseInt($('.itemDl').children('dd').length); 
        //alert(_len); 
        var _pages=''; 
        //alert(this.pageSize); 
        if(_len%this.pageSize==0){ 
             
            _pages=_len/this.pageSize 
            }else{ 
                //alert(_len/this.pageSize); 
                _pages=parseInt(_len/this.pageSize)+1; 
                //alert(parseInt(_len/this.pageSize)+1); 
                } 
            return _pages; 
        } 
    page.getChangePage=function(){ 
        $('.pages li[rel=total]').html('共'+this.pages+'页/第'+this.currentPage+'页'); 
        $('.pages li[rel='+this.currentPage+']').addClass('thispage').siblings().removeClass('thispage'); 
        } 
    page.run(); 
    //alert(run.pages); 
    //run.gotoNextPage(); 
/**********************************************************/ 



摘自 PainsOnline的专栏