關於分頁插件kkpager存在的bug

解決辦法:關於分頁插件kkpager的2個bug

按照條件查詢時,分頁存在問題,只要做到2點:

1.這3個參數必須要以這種方式獲取
這裏寫圖片描述

2.kkpager.js一定要用修改後的版本:

/*
  kkpager V1.3
  https://github.com/pgkk/kkpager

  Copyright (c) 2013 [email protected]
  Licensed under the GNU GENERAL PUBLIC LICENSE
*/
var kkpager = {
        pagerid             : 'kkpager', //divID
        mode                : 'link', //模式(link 或者 click)
        pno                 : 1, //當前頁碼
        total               : 1, //總頁碼
        totalRecords        : 0, //總數據條數
        isShowFirstPageBtn  : true, //是否顯示首頁按鈕
        isShowLastPageBtn   : true, //是否顯示尾頁按鈕
        isShowPrePageBtn    : true, //是否顯示上一頁按鈕
        isShowNextPageBtn   : true, //是否顯示下一頁按鈕
        isShowTotalPage     : true, //是否顯示總頁數
        isShowCurrPage      : true,//是否顯示當前頁
        isShowTotalRecords  : false, //是否顯示總記錄數
        isGoPage            : true, //是否顯示頁碼跳轉輸入框
        isWrapedPageBtns    : true, //是否用span包裹住頁碼按鈕
        isWrapedInfoTextAndGoPageBtn : true, //是否用span包裹住分頁信息和跳轉按鈕
        hrefFormer          : '', //鏈接前部
        hrefLatter          : '', //鏈接尾部
        gopageWrapId        : 'kkpager_gopage_wrap',
        gopageButtonId      : 'kkpager_btn_go',
        gopageTextboxId     : 'kkpager_btn_go_input',
        lang                : {
            firstPageText           : '首頁',
            firstPageTipText        : '首頁',
            lastPageText            : '尾頁',
            lastPageTipText         : '尾頁',
            prePageText             : '上一頁',
            prePageTipText          : '上一頁',
            nextPageText            : '下一頁',
            nextPageTipText         : '下一頁',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '頁',
            currPageBeforeText      : '當前第',
            currPageAfterText       : '頁',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '條數據',
            gopageBeforeText        : ' 轉到',
            gopageButtonOkText      : '確定',
            gopageAfterText         : '頁',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '頁'
        },
        //鏈接算法(當處於link模式),參數n爲頁碼
        getLink : function(n){
            //這裏的算法適用於比如:
            //hrefFormer=http://www.xx.com/news/20131212
            //hrefLatter=.html
            //那麼首頁(第1頁)就是http://www.xx.com/news/20131212.html
            //第2頁就是http://www.xx.com/news/20131212_2.html
            //第n頁就是http://www.xx.com/news/20131212_n.html
            if(n == 1){
                return this.hrefFormer + this.hrefLatter;
            }
            return this.hrefFormer + '_' + n + this.hrefLatter;
        },
        //頁碼單擊事件處理函數(當處於mode模式),參數n爲頁碼
        click   : function(n){
            //這裏自己實現
            //這裏可以用this或者kkpager訪問kkpager對象
            return false;
        },
        //獲取href的值(當處於mode模式),參數n爲頁碼
        getHref : function(n){
            //默認返回'#'
            return '#';
        },
        //跳轉框得到輸入焦點時
        focus_gopage : function (){
            var btnGo = $('#'+this.gopageButtonId);
            $('#'+this.gopageTextboxId).attr('hideFocus',true);
            btnGo.show();
            btnGo.css('left','10px');
            $('#'+this.gopageTextboxId).addClass('focus');
            btnGo.animate({left: '+=30'}, 50);
        },
        //跳轉框失去輸入焦點時
        blur_gopage : function(){
            var _this = this;
            setTimeout(function(){
                var btnGo = $('#'+_this.gopageButtonId);
                btnGo.animate({
                    left: '-=25'
                  }, 100, function(){
                      btnGo.hide();
                      $('#'+_this.gopageTextboxId).removeClass('focus');
                  });
            },400);
        },
        //跳轉輸入框按鍵操作
        keypress_gopage : function(){
            var event = arguments[0] || window.event;
            var code = event.keyCode || event.charCode;
            //delete key
            if(code == 8) return true;
            //enter key
            if(code == 13){
                kkpager.gopage();
                return false;
            }
            //copy and paste
            if(event.ctrlKey && (code == 99 || code == 118)) return true;
            //only number key
            if(code<48 || code>57)return false;
            return true;
        },
        //跳轉框頁面跳轉
        gopage : function(){
            var str_page = $('#'+this.gopageTextboxId).val();
            if(isNaN(str_page)){
                $('#'+this.gopageTextboxId).val(this.next);
                return;
            }
            var n = parseInt(str_page);
            if(n < 1) n = 1;
            if(n > this.total) n = this.total;
            if(this.mode == 'click'){
                this._clickHandler(n);
            }else{
                window.location = this.getLink(n);
            }
        },
        //不刷新頁面直接手動調用選中某一頁碼
        //不刷新頁面直接手動調用選中某一頁碼
        selectPage: function (n, b, c) { 
        this._config['pno'] = n;
        this._config['total'] = b;
        this._config['totalRecords'] = c;
        this.generPageHtml(this._config,true);
        },
        //生成控件代碼
        generPageHtml : function(config,enforceInit){
            if(enforceInit || !this.inited){
                this.init(config);
            }

            var str_first='',str_prv='',str_next='',str_last='';
            if(this.isShowFirstPageBtn){
                if(this.hasPrv){
                    str_first = '<a '+this._getHandlerStr(1)+' title="'
                        +(this.lang.firstPageTipText || this.lang.firstPageText)+'">'+this.lang.firstPageText+'</a>';
                }else{
                    str_first = '<span class="disabled">'+this.lang.firstPageText+'</span>';
                }
            }
            if(this.isShowPrePageBtn){
                if(this.hasPrv){
                    str_prv = '<a '+this._getHandlerStr(this.prv)+' title="'
                        +(this.lang.prePageTipText || this.lang.prePageText)+'">'+this.lang.prePageText+'</a>';
                }else{
                    str_prv = '<span class="disabled">'+this.lang.prePageText+'</span>';
                }
            }
            if(this.isShowNextPageBtn){
                if(this.hasNext){
                    str_next = '<a '+this._getHandlerStr(this.next)+' title="'
                        +(this.lang.nextPageTipText || this.lang.nextPageText)+'">'+this.lang.nextPageText+'</a>';
                }else{
                    str_next = '<span class="disabled">'+this.lang.nextPageText+'</span>';
                }
            }
            if(this.isShowLastPageBtn){
                if(this.hasNext){
                    str_last = '<a '+this._getHandlerStr(this.total)+' title="'
                        +(this.lang.lastPageTipText || this.lang.lastPageText)+'">'+this.lang.lastPageText+'</a>';
                }else{
                    str_last = '<span class="disabled">'+this.lang.lastPageText+'</span>';
                }
            }
            var str = '';
            var dot = '<span class="spanDot">...</span>';
            var total_info='<span class="totalText">';
            var total_info_splitstr = '<span class="totalInfoSplitStr">'+this.lang.totalInfoSplitStr+'</span>';
            if(this.isShowCurrPage){
                total_info += this.lang.currPageBeforeText + '<span class="currPageNum">' + this.pno + '</span>' + this.lang.currPageAfterText;
                if(this.isShowTotalPage){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;
                }else if(this.isShowTotalRecords){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
                }
            }else if(this.isShowTotalPage){
                total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;;
                if(this.isShowTotalRecords){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
                }
            }else if(this.isShowTotalRecords){
                total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
            }
            total_info += '</span>';

            var gopage_info = '';
            if(this.isGoPage){
                gopage_info = '<span class="goPageBox">'+this.lang.gopageBeforeText+'<span id="'+this.gopageWrapId+'">'+
                    '<input type="button" id="'+this.gopageButtonId+'" onclick="kkpager.gopage()" value="'
                        +this.lang.gopageButtonOkText+'" />'+
                    '<input type="text" id="'+this.gopageTextboxId+'" onfocus="kkpager.focus_gopage()"  onkeypress="return kkpager.keypress_gopage(event);"   onblur="kkpager.blur_gopage()" value="'+this.next+'" /></span>'+this.lang.gopageAfterText+'</span>';
            }

            //分頁處理
            if(this.total <= 8){
                for(var i=1;i<=this.total;i++){
                    if(this.pno == i){
                        str += '<span class="curr">'+i+'</span>';
                    }else{
                        str += '<a '+this._getHandlerStr(i)+' title="'
                            +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                    }
                }
            }else{
                if(this.pno <= 5){
                    for(var i=1;i<=7;i++){
                        if(this.pno == i){
                            str += '<span class="curr">'+i+'</span>';
                        }else{
                            str += '<a '+this._getHandlerStr(i)+' title="'+
                                this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                        }
                    }
                    str += dot;
                }else{
                    str += '<a '+this._getHandlerStr(1)+' title="'
                        +this.lang.buttonTipBeforeText + '1' + this.lang.buttonTipAfterText+'">1</a>';
                    str += '<a '+this._getHandlerStr(2)+' title="'
                        +this.lang.buttonTipBeforeText + '2' + this.lang.buttonTipAfterText +'">2</a>';
                    str += dot;

                    var begin = this.pno - 2;
                    var end = this.pno + 2;
                    if(end > this.total){
                        end = this.total;
                        begin = end - 4;
                        if(this.pno - begin < 2){
                            begin = begin-1;
                        }
                    }else if(end + 1 == this.total){
                        end = this.total;
                    }
                    for(var i=begin;i<=end;i++){
                        if(this.pno == i){
                            str += '<span class="curr">'+i+'</span>';
                        }else{
                            str += '<a '+this._getHandlerStr(i)+' title="'
                                +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                        }
                    }
                    if(end != this.total){
                        str += dot;
                    }
                }
            }
            var pagerHtml = '<div>';
            if(this.isWrapedPageBtns){
                pagerHtml += '<span class="pageBtnWrap">' + str_first + str_prv + str + str_next + str_last + '</span>'
            }else{
                pagerHtml += str_first + str_prv + str + str_next + str_last;
            }
            if(this.isWrapedInfoTextAndGoPageBtn){
                pagerHtml += '<span class="infoTextAndGoPageBtnWrap">' + total_info + gopage_info + '</span>';
            }else{
                pagerHtml += total_info + gopage_info;
            }
            pagerHtml += '</div><div style="clear:both;"></div>';
            $("#"+this.pagerid).html(pagerHtml);
        },
        //分頁按鈕控件初始化
        init : function(config){
            this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
            this.total = isNaN(config.total) ? 1 : parseInt(config.total);
            this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);
            if(config.pagerid){this.pagerid = config.pagerid;}
            if(config.mode){this.mode = config.mode;}
            if(config.gopageWrapId){this.gopageWrapId = config.gopageWrapId;}
            if(config.gopageButtonId){this.gopageButtonId = config.gopageButtonId;}
            if(config.gopageTextboxId){this.gopageTextboxId = config.gopageTextboxId;}
            if(config.isShowFirstPageBtn != undefined){this.isShowFirstPageBtn=config.isShowFirstPageBtn;}
            if(config.isShowLastPageBtn != undefined){this.isShowLastPageBtn=config.isShowLastPageBtn;}
            if(config.isShowPrePageBtn != undefined){this.isShowPrePageBtn=config.isShowPrePageBtn;}
            if(config.isShowNextPageBtn != undefined){this.isShowNextPageBtn=config.isShowNextPageBtn;}
            if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
            if(config.isShowCurrPage != undefined){this.isShowCurrPage=config.isShowCurrPage;}
            if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
            if(config.isWrapedPageBtns){this.isWrapedPageBtns=config.isWrapedPageBtns;}
            if(config.isWrapedInfoTextAndGoPageBtn){this.isWrapedInfoTextAndGoPageBtn=config.isWrapedInfoTextAndGoPageBtn;}
            if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
            if(config.lang){
                for(var key in config.lang){
                    this.lang[key] = config.lang[key];
                }
            }
            this.hrefFormer = config.hrefFormer || '';
            this.hrefLatter = config.hrefLatter || '';
            if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;}
            if(config.click && typeof(config.click) == 'function'){this.click = config.click;}
            if(config.getHref && typeof(config.getHref) == 'function'){this.getHref = config.getHref;}
            if(!this._config){
                this._config = config;
            }
            //validate
            if(this.pno < 1) this.pno = 1;
            this.total = (this.total <= 1) ? 1: this.total;
            if(this.pno > this.total) this.pno = this.total;
            this.prv = (this.pno<=2) ? 1 : (this.pno-1);
            this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);
            this.hasPrv = (this.pno > 1);
            this.hasNext = (this.pno < this.total);

            this.inited = true;
        },
        _getHandlerStr : function(n){
            if(this.mode == 'click'){
                return 'href="'+this.getHref(n)+'" onclick="return kkpager._clickHandler('+n+')"';
            }
            //link模式,也是默認的
            return 'href="'+this.getLink(n)+'"';
        },
        _clickHandler   : function(n){
            var res = false;
            if(this.click && typeof this.click == 'function'){
                res = this.click.call(this,n) || false;
            }
            return res;
        }
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章