jquery分頁展示控件：kkpager

kkpager，jquery 分頁展示控件，只需要傳入少量參數即可展示。

準備工作,引入js、css

<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager.css" />

調用方法

<div id="kkpager"></div>
<script type="text/javascript">
//生成分頁控件
kkpager.init({
     pno : '${p.pageNo}',
     //總頁碼
     total : '${p.totalPage}',
     //總數據條數
     totalRecords : '${p.totalCount}',
     //鏈接前部
     hrefFormer : '${hrefFormer}',
     //鏈接尾部
     hrefLatter : '${hrefLatter}'
});
kkpager.generPageHtml();
</script>

默認鏈接算法，按需重寫

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;
     }else{
          return this.hrefFormer + '_' + n + this.hrefLatter;
     }
}

必選參數

//當前頁碼
    pno
    //總頁碼
    total
    //總數據條數
    totalRecords

可選參數

//divID
    pagerid : 'kkpager'

    //是否顯示總頁數
    isShowTotalPage : true

    //是否顯示總記錄數
    isShowTotalRecords : true

    //是否顯示頁碼跳轉輸入框
    isGoPage : true

    //鏈接前部
    hrefFormer : ''

    //鏈接尾部
    hrefLatter : ''

    lang : {
        prePageText : '上一頁',
        nextPageText : '下一頁',
        totalPageBeforeText : '共',
        totalPageAfterText : '頁',
        totalRecordsAfterText : '條數據',
        gopageBeforeText : '轉到',
        gopageButtonOkText : '確定',
        gopageAfterText : '頁',
        buttonTipBeforeText : '第',
        buttonTipAfterText : '頁'
    }

    //頁碼跳轉dom元素ID
    gopageWrapId : 'kkpager_gopage_wrap'
    //頁碼跳轉按鈕ID
    gopageButtonId : 'kkpager_btn_go'
    //頁碼輸入框ID
    gopageTextboxId : 'kkpager_btn_go_input'

    /****鏈接算法****/
    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;
        }else{
            return this.hrefFormer + '_' + n + this.hrefLatter;
        }
    }

項目主頁：http://www.baiduhome.net/lib/view/home/1392108502957