Jquery分页组件

　　 最近工作不是很忙，所以就看看淘宝kissy分页组件源码，感觉代码也不怎么难 容易理解，所以就按照他们的思路自己重新理一遍，来加深自己对他们的理解，同时对他们的分页组件进行一些重构(因为他们分页是做好了，但是不能直接拿来用，所以就封装了下)，所以就用jquery封装了一个。

配置参数如下：

       影响分页组件信息展现的因素如下图所示：

                            

     组件提供以下配置参数： totalPage，总页数，默认值为1 ， currentPage，初始选中的页码，默认值为1 ，firstPagesCount，最前面的展现页数，默认值为2， preposePagesCount，当前页的紧邻前置页数，默认值为2 ，postposePagesCount，当前页的紧邻后置页数，默认值为1， lastPagesCount，最后面的展现页数，默认值为0 ， render，是否自动渲染组件，默认值为true。

   对外公开的方法：

    render():  渲染组件

show():    显示组件

hide():     隐藏组件

destory():  销毁组件

   页码显示及对应的HTML结构渲染问题：

一： 当前“选中的页”前面HTML结构渲染的方式如下：

判断当前选中的页码 如果小于或者等于 （最前面的展示页数 + 当前页的紧邻前置页数 +1）的话

if (currentPage <= firstPagesCount + preposePagesCount + 1) {
              
                for(var i=1; i<currentPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }

这种情况下：对应的描述图如下：

　　 对应的HTML结构代码如：  

那么否则的话         // 对应图3

　　else {
                for(var i=1; i<= firstPagesCount; i++) {
                    pageHTML += self._renderActivePage(i);
                }
                pageHTML += '<span class="pagination-break">...</span>';
                for(var i = currentPage-preposePagesCount; i <= currentPage-1; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }　　

那么对应的描述图如这样的：

　　　　　　        图3：

渲染HTML结构：

接着 就是当前选中的页 html结构

　　// 当前页的页码 html显示
        pageHTML += '<span class="pagination-curr">' + currentPage + '</span>';

二： 当前页页码后面的html展示 

　　如果当前页 大于或者等于 （总页数 - 最后面的展现页数 - 当前页的紧邻后置页数）的话 代码如下：

         if (currentPage >= totalPage - lastPagesCount - postposePagesCount) {
                offset = currentPage + 1;
                for(var i=currentPage+1; i<=totalPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }

对应的图如下：

对应的HTML结构渲染如下：

否则的话：代码如下

　  else {
                for(var i=currentPage+1; i<= currentPage+postposePagesCount; i++) {
                    pageHTML += self._renderActivePage(i);
                }
                pageHTML += '<span class="pagination-break">...</span>';
                for(var i=totalPage-lastPagesCount+1; i<=totalPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }

对应图如下：

对应的HTML结构渲染如下：

最后判断下一页的显示方式   代码如下：

pageHTML += currentPage === totalPage ? '<span class="pagination-end"><span>下一页</span></span>' : '<a class="pagination-next"><span>下一页<span></a>';

Jquery所有的JS代码如下：

/**
 * fileoverview Jquery分页组件
 * @param {selector} 分页容器
 * @param {cfg} object 默认配置
 */

var Pagination = (function(){

function Pagination(selector,cfg){
        if(this instanceof Pagination) {

// 匹配传参数clickElem
            if($.isPlainObject(selector)){
                this.selector = selector;
            }else if(/^\./.test(selector)){
                this.selector = $(selector);
            }else if(/^#/.test(selector)){
                this.selector = $(selector);
            }else if($('.'+selector)){
                this.selector = $('.'+selector);
            }else {
                throw new Error('传递参数不符合!');
            }
        }else {
            new Pagination(selector,cfg);
        }
        
        cfg = $.extend(Pagination.config,cfg || {});
        this.config = cfg || {};
        
        // 初始化时候 默认选中的页数
        $.isFunction(this.config.callback) && this.config.callback(this.config.currentPage);

this._init();
        
    }

Pagination.config = {
        
        // 总页数
        totalPage:1,
        
        // 默认选中的页数
        currentPage: 1,

//当前页最大紧邻前置页数(不包括最前面显示页数)
        preposePagesCount: 2,

//当前页的最大紧邻后置页数
        postposePagesCount: 1,

// 第一个"..."前显示的页数
        firstPagesCount: 2,

// 第二个"..."后显示的页数
        lastPagesCount: 0,
        
        render: true,

callback: function(idx){}
    };
    Pagination.prototype = {
        
        _init: function(){
            
            var self = this;
            
            if(self.config.render === true){
                
                self.render();
            }
            
        },

/* 渲染 */
        render: function(){
            
            var self = this;
            self._renderUI();
            
            self._bindUI();
        },
        _renderUI: function(){
            var self = this;
            self._resetPagination();
        },

// 处理点击元素
        _bindUI: function(){
            
            var self = this;
            
            /*
             * 注意jquery1.9 没有live这个方法 所以在jquery1.9 API上会报错 jquery1.9以上考虑用其他的绑定事件方法
             */
            $('.pagination-spec').live('click',function(e){
                var target = e.target,
                    toPage = $(target).attr('data-page') * 1;
                self._switchToPage(toPage);
            });
            $('.pagination-prev').live('click',function(e){
                var toPage = self.config.currentPage - 1;
                self._switchToPage(toPage);
            });
            $('.pagination-next').live('click',function(e){
                var toPage = self.config.currentPage + 1;
                self._switchToPage(toPage);
            });
        },
        _switchToPage: function(page){
            var self = this;
            self.config.currentPage = page;
            self._resetPagination();
            
            // 页面显示成功后 回调
            $.isFunction(self.config.callback) && self.config.callback(self.config.currentPage);
        },
        /*
         * 刷新分页
         */
        _resetPagination: function(){
            
            var self = this,
                pageHTML = '',
                totalPage = self.config.totalPage > 0 ? self.config.totalPage : 1,
                currentPage = (self.config.currentPage <= totalPage) && (self.config.currentPage > 0) ? self.config.currentPage : 1,
                preposePagesCount = self.config.preposePagesCount >=0 ? self.config.preposePagesCount : 2,
                postposePagesCount = self.config.postposePagesCount >=0 ? self.config.postposePagesCount : 1,
                firstPagesCount = self.config.firstPagesCount >=0 ? self.config.firstPagesCount : 2,
                lastPagesCount = self.config.lastPagesCount >=0 ? self.config.lastPagesCount : 0,
                offset;
            // 当前页码显示
            pageHTML += currentPage === 1 ? '<span class="pagination-start"><span>上一页</span></span>' :
            '<a class="pagination-prev"><span>上一页</span></a>';
            
            //当前页的 前面html结构显示问题
            if (currentPage <= firstPagesCount + preposePagesCount + 1) {
                
                for(var i=1; i<currentPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }

}else {
                for(var i=1; i<= firstPagesCount; i++) {
                    pageHTML += self._renderActivePage(i);
                }
                pageHTML += '<span class="pagination-break">...</span>';
                for(var i=currentPage-preposePagesCount; i<=currentPage-1; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }
            // 当前页的页码 html显示
            pageHTML += '<span class="pagination-curr">' + currentPage + '</span>';

// 当前页页码后面的html展示
            if (currentPage >= totalPage - lastPagesCount - postposePagesCount) {
                offset = currentPage + 1;
                for(var i=currentPage+1; i<=totalPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }

} else {
                for(var i=currentPage+1; i<= currentPage+postposePagesCount; i++) {
                    pageHTML += self._renderActivePage(i);
                }
                pageHTML += '<span class="pagination-break">...</span>';
                for(var i=totalPage-lastPagesCount+1; i<=totalPage; i++) {
                    pageHTML += self._renderActivePage(i);
                }
            }
            pageHTML += currentPage === totalPage ? '<span class="pagination-end"><span>下一页</span></span>' :
                '<a class="pagination-next"><span>下一页<span></a>';
            
            $(self.selector).html(pageHTML);
        },

/**
            * @ 渲染可点击的页码
         * @param index {Number} 页码索引
         *
         */
        _renderActivePage: function(index) {
            return '<a class="pagination-spec" data-page="' + index + '">' + index + '</a>';
        },
        show: function(){
            var self = this;
            $(self.selector).show();
        },
        hide: function(){
            var self = this;
            $(self.selector).hide();
        },
        
        // 销毁
        destory: function(){
            var self = this;
            $(self.selector) = null;

// 销毁用live绑定的事情
            $('.pagination-spec').die('click');
            $('.pagination-prev').die('click');
            $('.pagination-next').die('click');
        }
    };
    return Pagination;
 })();

HTML调用方式如下：
     <div id = "Pagination"></div>
     <div id="content"></div>
     <script type="text/javascript">
         var intPageSize = 8, //一页定义8条数据
             intRowCount = 100; //记录总数
             intPageCount = Math.ceil(intRowCount/intPageSize);
         new Pagination('#Pagination',{
             totalPage: intPageCount,
             callback: function(idx){
                 console.log(idx);
             }
         });
     </script>
 
    其中一页显示多少条intPageSize 是用户自定义的，
    记录总数intRowCount  是后台开发人员给的，
    总共多少页 intPageCount  是我们要计算的。
    初始化方式如上 通过实例化。
    然后callback回调函数 把相对应的 每页显示多少条intPageSize  
    和  相对应的页码 idx ajax方式传参提交给开发人员  
    返回相应的信息 我们渲染出来 就ok！

css也放上来吧！如下

<style>
        body {
            font: 12px/1.5 tahoma,arial,宋体b8b\4f53;
        }
        
        .pagination-start,
        .pagination-prev,
        .pagination-next,
        .pagination-end
        {
            width: 36px;
            background: url(http://img04.taobaocdn.com/tps/i4/T1cP85XihuXXXXXXXX-13-101.png) no-repeat;
        }
        .pagination-start,
        .pagination-prev,
        .pagination-next,
        .pagination-end,
        .pagination-spec,
        .pagination-curr,
        .pagination-break
        {
            min-width: 16px;
            _width: 16px;
            border: 1px solid #ccc;
            display: inline;
            float: left;
            height: 24px;
            margin-right: 3px;
            padding: 0 5px;
            line-height: 24px;
            text-align: center;
            font-family: Tahoma,SimSun,Arial;
            vertical-align: top;
            white-space: nowrap;
            overflow: hidden;
        }
        .pagination-start {
            padding-left: 16px;
            background-position: 5px 8px;
        }
         .pagination-prev {
            padding-left: 16px;
            background-position: 0 -12px;
        }
        .pagination-curr {
            font-weight: 700;
            color: #fd6d01;
            background-color: #ffede1;
            border: 1px solid #fd6d01;
        }
         .pagination-break {
            color: #c0c0c0;
            border: 0;
        }
         .pagination-next {
            padding-right: 16px;
            background-position: 42px -50px;
        }
        .pagination-end {
            padding-right: 16px;
            background-position: 47px -31px;
        }
        a {
            color: #36c;
            cursor: pointer;
        }
         a:hover {
            border: 1px solid #fd6d01;
        }
        
    </style>