原创：GridView组件（三）：分页组件部分

原创：GridView组件（三）：分页组件部分

上期回顾：http://www.cnblogs.com/beiou/p/4274434.html

初始化部分：

if(this.opts.pageModule){
                if(this.opts.pageModule.panel != null && this.opts.pageModule.panel.length > 0){
                    this.opts.pageModule.panel.append(this._pagePanel);
                }else{
                    if(this.opts.pageModule.isTop){
                        this._pagePanel.insertBefore(this._colHeadPanel);
                    }else{
                        this.target.append(this._pagePanel);
                    }
                }                
                this.page = this._pagePanel.GridPage({
                    total: this.opts.pageModule.total,
                    index: this.opts.pageModule.index,
                    pageNum: this.opts.pageModule.pageNum,
                    pageRate: this.opts.pageModule.pageRate,
                    onChange:this.opts.pageModule.onChange,
                    onSetNum:this.opts.pageModule.onSetNum,
                    type:this.opts.pageModule.type
                });
            }

组件code部分：（可单独使用，并不局限于只在Gridview中使用）

var GridPageControl = function (pObj, pOpts) {//gridview分页组件
        pOpts = $.extend({
            index:1,                    //当前页
            viewNum:3,
            pageNum:50,                 //每页显示数量
            total:100,                  //总数
            pageRate:[50,100,200,500],  //每页显示数量
            onChange:null,              //分页事件回调function(pIndex)
            onSetNum:null,               //设置每页显示数量function(pNum)
            type:true
        }, pOpts);
        $.extend(this, pOpts);
        this.target = $(pObj);
        this.init(pOpts);
    };
    GridPageControl.prototype = {
        init: function () {
            this.setOptions();
            if(this.type){
                this.viewPage(this.index);
            }else{
                this.viewPageNumber(this.index);
            }
        },
        setOptions: function () {
            
            this.pageTotal = this.total % this.pageNum > 0 ? parseInt(this.total / this.pageNum) + 1 : parseInt(this.total / this.pageNum);
        },
        prevPage: function () {
            this.index -= 1;
            return this.setPageByIndex(this.index);
        },
        nextPage: function () {
            this.index += 1;
            return this.setPageByIndex(this.index);
        },
        setTotle: function (pNum) {
            this.total = pNum;
            this.pageTotal = this.total % this.pageNum > 0 ? parseInt(this.total / this.pageNum) + 1 : parseInt(this.total / this.pageNum);
            if(this.type){
                this.viewPage(this.index);
            }else{
                this.viewPageNumber(this.index);
            }
        },
        bindEvent: function () {
            var _this = this;
            this.target.off("click.gridPage");
            this.target.on("click.gridPage", function (e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                target = target.tagName === "I" ? target.parentNode : target;
                if (target.tagName === "A") {
                    if($(target).hasClass("no")) return;
                    var _type = $(target).data("type"),
                        _hash = {
                            "prev":function(){ _this.prevPage() },
                            "next":function(){ _this.nextPage() },
                            "first":function(){ _this.setPageByIndex(1) },
                            "last":function(){ _this.setPageByIndex(_this.pageTotal) },
                            "refresh":function(){ _this.setPageByIndex(_this.index) }
                        }
                    if(_hash[_type]){
                        _hash[_type]();
                    }else{
                        var index = parseInt(target.innerHTML, 10);
                        _this.setPageByIndex(index);
                    }
                }
            });
            this.pageInput.on("keydown.gridPage",function(e){
                if(e.keyCode == $.KEY_ENTER){
                    _this.onEnter();
                }
            });
            this.goInput && this.goInput.on("click.gridPage",function(){
                _this.onEnter();
            });
            this.numDrop && this.numDrop.on("change.gridPage", function () {
                _this.pageNum = ~~_this.numDrop.val();
                if($.type(_this.onSetNum) === "function"){
                    _this.index = 1;
                    _this.setTotle(_this.total);
                    _this.onSetNum.call(this,_this.numDrop.val());
                }
            });
        },
        onEnter:function(){
            var _val = this.pageInput.val();
            _val = _val.replace(/D/g,'');
            if(_val.length == 0) {
                this.setPageByIndex(1);
            }else{
                if(~~_val == this.index){
                    this.pageInput.val(this.index);
                    return;
                } 
                if(~~_val > this.pageTotal){
                    this.setPageByIndex(this.pageTotal);
                }else{
                    this.setPageByIndex(_val);
                }
            }
        },
        setPageByIndex: function (pIndex) {
            if (typeof pIndex === "undefined") {
                return this.index;
            } else {
                this.index = pIndex = ~ ~pIndex;
                if($.type(pIndex) === "number"){
                    if (pIndex < 1) {
                        return [false, "over-low"];
                    } else if (pIndex > this.pageTotal) {
                        return [false, "over-high"];
                    } else {
                        this.indexHtml && this.indexHtml.html(pIndex);                        
                        if(this.type){
                            this.pageInput.val(pIndex);
                            this.initPage();
                        }else{
                            this.viewPageNumber(pIndex);
                            this.pageInput.val(pIndex);
                        }                        
                        if($.type(this.onChange) === "function"){
                            this.onChange.call(null,pIndex);
                        }
                        return [true, ""];
                    }
                }                
            }
        },
        initPage:function(){
            if(this.index == 1){
                this.firstBtn && this.firstBtn.addClass("no");
                this.prevBtn.addClass("no");
            }else{
                this.firstBtn && this.firstBtn.removeClass("no");
                this.prevBtn.removeClass("no");
            }

            if(this.index < this.pageTotal){
                this.nextBtn.removeClass("no");
                this.lastBtn && this.lastBtn.removeClass("no");
            }else{
                this.nextBtn.addClass("no");
                this.lastBtn && this.lastBtn.addClass("no");
            }
        },
        viewPageNumber:function(pIndex){
            this.index = pIndex;
            var dnum = this.viewNum % 2,
                hnum = (this.viewNum - dnum) / 2,
                center = pIndex - (pIndex - dnum) % hnum,
                start = Math.max(1, center - hnum + 1 - dnum),
                end = Math.min(this.pageTotal, start + this.viewNum - 1);
            var template = '<div class="page_box">
                <$ var start = GlobalData.start,end = GlobalData.end,currentIndex = GlobalData.currentIndex; $>
                <div class="page">
                    <span class="text">共 <$= GlobalData.total $> 条</span>
                    <a href="javascript:" class="prev" data-type="prev">&lt;</a>
                    <$ if(start > 1){ $>
                        <a href="javascript:" class="num">1</a>
                    <$ } $>
                    <$ if(start > 2){ $>
                        <span class="more">...</span>
                    <$ } $>
                    <$ for(;start < currentIndex;start++){ $>
                        <a href="javascript:" class="num"><$= start $></a>
                    <$ } $>
                    <span class="num active"><$= GlobalData.currentIndex $></span>
                    <$ for (currentIndex++; currentIndex <= end; currentIndex++) { $>
                        <a href="javascript:" class="num"><$= currentIndex $></a>
                    <$ } $>
                    <$ if(end < GlobalData.pageTotal - 1){ $>
                        <span class="more">...</span>
                    <$ } $>
                    <$ if(end < GlobalData.pageTotal){ $>
                        <a href="javascript:" class="num"><$= GlobalData.pageTotal $></a>
                    <$ } $>
                    <a href="javascript:" class="next" data-type="next">&gt;</a>
                    <span class="text"><input type="text"></span>
                    <span class="button"><input type="button" value="Go"></span>
                </div>
            </div>';
            this.target.html($.template.replace(template,{
                total:this.total,
                currentIndex:pIndex,
                start:start,
                end:end,
                pageTotal:this.pageTotal
            }));
            this.prevBtn = this.target.find(".prev");
            this.nextBtn = this.target.find(".next");
            this.pageInput = this.target.find("input:eq(0)");
            this.goInput = this.target.find("input:eq(1)");
            this.initPage();
            this.bindEvent();
        },
        viewPage: function (pIndex) {
            this.index = pIndex;            
            var template = '
                    <div class="pGroup"><select>
                        <$ for(var i = 0,l = GlobalData.pageRate.length;i < l;i++){ $>
                            <option value="<$= GlobalData.pageRate[i] $>"><$= GlobalData.pageRate[i] $>&nbsp;&nbsp;</option>
                        <$ } $>
                    </select></div>
                    <div class="btnseparator"></div>
                    <div class="pageNum">
                        <div class="pGroup">
                            <a href="javascript:" class="first" data-type="first" title="第一页"><i class="icon-step-backward"></i></a>
                            <a href="javascript:" class="prev" data-type="prev" title="上一页"><i class="icon-caret-left"></i></a>
                        </div>
                        <div class="btnseparator"></div>
                        <div class="pGroup">
                            到<input type="text" value="<$= GlobalData.index $>" />页
                        </div>
                        <div class="btnseparator"></div>
                        <div class="pGroup">
                            <a href="javascript:" class="next" data-type="next" title="下一页"><i class="icon-caret-right"></i></a>
                            <a href="javascript:" class="last" data-type="last" title="最后一页"><i class="icon-step-forward"></i></a>
                        </div>
                        <div class="btnseparator"></div>
                        <div class="pGroup">
                            <a href="javascript:" class="refresh" data-type="refresh" title="刷新"><i class="icon-refresh"></i></a>
                        </div>
                    </div>
                    <div class="btnseparator"></div>
                    <div class="pGroup"><span>共<$= GlobalData.pageTotal $>页</span></div>
                    <div class="pGroup"><span><$= GlobalData.index $></span><span>/<$= GlobalData.pageTotal $></span></div>';
                    //<span>当前第<$= GlobalData.index $>页</span>
            this.target.html($.template.replace(template,{
                pageRate:this.pageRate,
                index:this.index,
                total:this.total,
                pageTotal:this.pageTotal
            }));
            this.indexHtml = this.target.find("span:eq(1)");
            this.numDrop = this.target.find("select");
            this.numDrop.val(this.pageNum);
            this.firstBtn = this.target.find(".first");
            this.prevBtn = this.target.find(".prev");
            this.nextBtn = this.target.find(".next");
            this.lastBtn = this.target.find(".last");
            this.pageInput = this.target.find("input");
            this.initPage();
            this.bindEvent();
        }
    };

附加到JQuery.fn部分：

$.fn.extend({
        GridPage: function (pOpts) {
            var _defaults = {};
            if (typeof pOpts !== "undefined") {
                $.extend(true, _defaults, pOpts);
            }
            GridPageControl["instance"] = new GridPageControl(this, _defaults);
            return GridPageControl["instance"];
        }
    });

page分页的配置项部分：

pageModule:{                //--分页配置--
                panel:null,                   //分页容器 默认null 需配置jQeryDom
                isTop:false,                  //是否置顶
                index:1,                      //当前页
                pageNum:50,                   //当前每页显示数量
                pageRate:[50,100,200,500],    //每页显示数量
                total:50,                     //总数
                onChange:null,                //分页事件回调function(pIndex)
                onSetNum:null,                //设置每页显示数量function(pNum)
                type:true                     //两套分页默认true
            }