实现页面的自动分页

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.后续

   虽然上面的代码很简单，但是写完之后依然觉得神清气爽。