js分頁展現控件，傳入簡單參數就能使用的分頁效果控件

https://github.com/pgkk/kkpager

kkpager v1.3

js分頁展現控件，傳入簡單參數就能使用的分頁效果控件

在線測試連接： http://pgkk.github.io/kkpager/example/pager_test.htmlhttp://pgkk.github.io/kkpager/example/pager_test_orange_color.htmlhttp://pgkk.github.io/kkpager/example/pager_test_clickmode.html

準備工做,引入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_blue.css" />

HTML DOM容器

<div id="kkpager"></div>

調用方法

一、使用link模式

<script type="text/javascript">//生成分頁控件  kkpager.generPageHtml({    pno : '${p.pageNo}',    mode : 'link', //可選，默認就是link    //總頁碼      total : '${p.totalPage}',      //總數據條數      totalRecords : '${p.totalCount}',      //連接前部      hrefFormer : '${hrefFormer}',    //連接尾部      hrefLatter : '${hrefLatter}',    //連接算法    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;    }});</script>

getLink 參數須要按須要重寫。

二、使用click模式（自定義跳轉函數）

<script type="text/javascript">//生成分頁控件  kkpager.generPageHtml({    pno : '${p.pageNo}',    mode : 'click', //設置爲click模式    //總頁碼      total : '${p.totalPage}',      //總數據條數      totalRecords : '${p.totalCount}',    //點擊頁碼、頁碼輸入框跳轉、以及首頁、下一頁等按鈕都會調用click    //適用於不刷新頁面，好比ajax    click : function(n){        //這裏能夠作自已的處理        //...        //處理完後能夠手動條用selectPage進行頁碼選中切換        this.selectPage(n);    },    //getHref是在click模式下連接算法，通常不須要配置，默認代碼以下    getHref : function(n){        return '#';    }});</script>

click 參數須要按須要重寫,而getHref通常須要配置。

必選參數

pno 當前頁碼

total 總頁碼

totalRecords 總數據條數

可選參數

pagerid 分頁展現控件容器ID 字符串 默認值 'kkpager'

mode 模式，click或link 字符串 默認值 'link'

isShowTotalPage 是否顯示總頁數 布爾型 默認值 true

isShowCurrPage 是否顯示當前頁 布爾型 默認值 true

isShowTotalRecords 是否顯示總記錄數 布爾型 默認值 false (當isShowTotalPage爲true時，此設置無效)

isShowFirstPageBtn 是否顯示首頁按鈕 布爾型 默認值 true

isShowLastPageBtn 是否顯示尾頁按鈕 布爾型 默認值 true

isShowPrePageBtn 是否顯示上一頁按鈕 布爾型 默認值 true

isShowNextPageBtn 是否顯示下一頁按鈕 布爾型 默認值 true

isGoPage 是否顯示頁碼跳轉輸入框 布爾型 默認值 true

isWrapedPageBtns 是否用span包裹住頁碼按鈕 布爾型 默認值 true

isWrapedInfoTextAndGoPageBtn 是否用span包裹住分頁信息和跳轉按鈕 布爾型 默認值 true

hrefFormer 連接前部 字符串 默認值 ''

hrefLatter 連接尾部 字符串 默認值 ''

lang 語言配置對象，屬性配置列表：

• firstPageText 首頁按鈕文本 字符串 默認值 '首頁'

• firstPageTipText 首頁按鈕提示文本 字符串 默認值 '首頁'

• lastPageText 尾頁按鈕文本 字符串 默認值 '尾頁'

• lastPageTipText 尾頁按鈕提示文本 字符串 默認值 '尾頁'

• prePageText 上一頁按鈕文本 字符串 默認值 '上一頁'

• prePageTipText 上一頁按鈕提示文本 字符串 默認值 '上一頁'

• nextPageText 下一頁按鈕文本 字符串 默認值 '下一頁'

• nextPageTipText 下一頁提示按鈕文本 字符串 默認值 '下一頁'

• totalPageBeforeText 總頁數前綴文本 字符串 默認值 '共'

• totalPageAfterText 總頁數後綴文本 字符串 默認值 '頁'

• currPageBeforeText 當前頁前綴文本 字符串 默認值 '當前第'

• currPageAfterText 當前頁後綴文本 字符串 默認值 '頁'

• totalInfoSplitStr 分頁統計信息部分的分隔符 字符串 默認值 '/'

• totalRecordsBeforeText 總記錄數前綴文本 字符串 默認值 '共'

• totalRecordsAfterText 總記錄數後綴文本 字符串 默認值 '條數據'

• gopageBeforeText 跳轉前綴文本 字符串 默認值 '轉到'

• gopageAfterText 跳轉前綴文本 字符串 默認值 '頁'

• gopageButtonOkText 跳轉按鈕文本 字符串 默認值 '肯定'

• buttonTipBeforeText 頁碼按鈕提示信息前綴 字符串 默認值 '第'

• buttonTipAfterText 頁碼按鈕提示信息後綴 字符串 默認值 '頁'

gopageWrapId 頁碼跳轉dom ID 字符串 默認值 'kkpager_gopage_wrap'

gopageButtonId 頁碼跳轉按鈕dom ID 字符串 默認值 'kkpager_btn_go'

gopageTextboxId 頁碼輸入框dom ID 字符串 默認值 'kkpager_btn_go_input'

getLink 連接算法函數（僅適用於mode爲link） 函數類型

click 自定義事件處理函數（僅適用於mode爲click） 函數類型

getHref 連接算法函數（僅適用於mode爲click） 函數類型

公開方法

selectPage 手動調用此函數選中某個頁碼

   //選中第2頁碼
   kkpager.selectPage(2);

默認連接算法，按需重寫

//默認連接算法函數，使用時須要按須要重寫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;
}