페이지 의 자동 페이지 나 누 기 실현

1. 머리말
     국경절 연 휴 에 기숙사 에 살 면서 블 로그 원 을 계속 방문 하기 시 작 했 는데 많은 채소 새 (본인 포함) 들 이 자동 으로 페이지 를 나 누 는 기능, 즉 js 를 통 해 페이지 의 페이지 를 나 누 는 것 을 발견 했다.솔직히 말 하면 예전 에 프로젝트 를 했 을 때 페이지 를 나 누 는 기능 은 모두 백 엔 드 에서 했 는데 이 일 은 정말 전단 에서 실현 하기에 적합 하지 않 고 페이지 의 성능 이 너무 중요 하 다.하지만 이렇게 많은 사람들 이 쓰 는 것 을 보고 손 이 간 지 러 워 지기 시 작 했 으 니 차라리 자신 도 써 보 세 요.
2. 코드
     이 기능 은 비교적 간단 해서 아예 코드 에 올 랐 다.    

html  section
 <ul id="list">
        <li>1</li>
        <li>...</li>
        <li>100</li>
</ul>
<div id="nav"></div>
__________________________________________________________
js section
function DividePage(config){
        this.config = config;
        this.elements = this.config.elements;
        this.init();
    }
    DividePage.prototype = {
        constructor: DividePage,
        init: function(){ 
            var num = $(this.elements).size(),
                page = Math.ceil(num/this.config.eachPage);
            this.config.pageNum = page;  //           
            if(num > 2){
                this.createJumpLink(); 
                this.bindEvent();
                this.showPage(1);
            }
        },
        showPage: function(n){
            var self = this;
            $(this.elements).each(function(i){
                if(i >= (n-1)*self.config.eachPage && i < n*self.config.eachPage ){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            this.isShowPrevNext(n);
        },
        isShowPrevNext: function(n){
            if(n === 1){
                $('#J-prev').hide();
                $('#J-next').show();
            }else if(n === this.config.pageNum){
                $('#J-prev').show();
                $('#J-next').hide();
            }else{
                $('#J-prev').show();
                $('#J-next').show();
            }
        },
        createJumpLink: function(){
            var str = '<a id="J-prev" href="javascript:void(0)">Prev</a>',
                str = str + '<select id="J-select">',
                num = this.config.pageNum , i;
            for(i=0;i<num;i++){
                str += '<option value="'+(i+1)+'">' +(i+1)+ '</option>';
            }
            str += '</select>';
            str += '<a id="J-next" href="javascript:void(0)">Next</a>'
            $(str).appendTo('#nav');
            $(this.config.nav).data('page',1); 
        },
        bindEvent: function(){
            this.selectEvent();
            this.PrevNextEvent();
        },
        selectEvent: function(){
            var self = this;
            $('#J-select').change(function(){
                var page = parseInt($(this).val(),10);
                self.showPage(page);
                $(this.config.nav).data('page',page);
            });
        },
        PrevNextEvent: function(){
            var self = this;
            $('#J-prev').click(function(){
                var currentPage = $(self.config.nav).data('page');
                if(currentPage > 1){
                    self.showPage(currentPage-1);
                    $(self.config.nav).data('page',currentPage-1);
                    $('#J-select').val(currentPage-1);
                }
            });
            $('#J-next').click(function(){
                var currentPage = parseInt($(self.config.nav).data('page'),10);
                if(currentPage < self.config.pageNum){
                    self.showPage(currentPage+1);
                    $(self.config.nav).data('page',currentPage+1);
                    $('#J-select').val(currentPage+1);
                }
            });
        }
    }
    new DividePage({
        elements: '#list > li',
        eachPage: 10,
        nav: '#nav'
    });

3. 후속
   위의 코드 는 매우 간단 하지만, 다 쓴 후에 도 여전히 기분 이 상쾌 하 다.