原項(xiàng)目地址：http://plugins.jquery.com/project/pagination
版本：v1.2
源文件下載：英文原版 或中文翻譯修改版

一、相關(guān)demo

• 基本demo頁(yè)面
• Ajax demo頁(yè)面
• 參數(shù)可編輯demo頁(yè)面

二、簡(jiǎn)介與說(shuō)明

• 此jQuery插件為Ajax分頁(yè)插件，一次性加載，故分頁(yè)切換時(shí)無(wú)刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢。
• 原插件CSS不太合理，使用浮動(dòng)，故無(wú)法方便實(shí)現(xiàn)左右方向的定位，且未清除浮動(dòng)，在中文修改版中我對(duì)其進(jìn)行了優(yōu)化，使其支持text-align的定位。
• 對(duì)原js文件注釋進(jìn)行了中文翻譯，demo頁(yè)面也是漢化了的，demo頁(yè)面的js與原demo有一些出入，但核心不變。

三、使用方法

跟一般的jQuery插件一樣，此插件使用也很簡(jiǎn)單便捷。方法是pagination，例如$("#page").pagination(100);，這里的100參數(shù)是必須的，表示顯示項(xiàng)目的總個(gè)數(shù)，這是最簡(jiǎn)單的使用，得到的顯示如下：

還有一點(diǎn)值得一提的是分頁(yè)列表需要放在class類為pagination的標(biāo)簽內(nèi)，您可以使用text-align屬性控制分頁(yè)居中顯示還是居右顯示。

回調(diào)函數(shù)一般用來(lái)裝載對(duì)應(yīng)分頁(yè)顯示的內(nèi)容，具體參見(jiàn)demo源文件。

四、參數(shù)

參數(shù)名	描述	參數(shù)值
maxentries	總條目數(shù)	必選參數(shù)，整數(shù)
items_per_page	每頁(yè)顯示的條目數(shù)	可選參數(shù)，默認(rèn)是10
num_display_entries	連續(xù)分頁(yè)主體部分顯示的分頁(yè)條目數(shù)	可選參數(shù)，默認(rèn)是10
current_page	當(dāng)前選中的頁(yè)面	可選參數(shù)，默認(rèn)是0，表示第1頁(yè)
num_edge_entries	兩側(cè)顯示的首尾分頁(yè)的條目數(shù)	可選參數(shù)，默認(rèn)是0
link_to	分頁(yè)的鏈接	字符串，可選參數(shù)，默認(rèn)是"#"
prev_text	“前一頁(yè)”分頁(yè)按鈕上顯示的文字	字符串參數(shù)，可選，默認(rèn)是"Prev"
next_text	“下一頁(yè)”分頁(yè)按鈕上顯示的文字	字符串參數(shù)，可選，默認(rèn)是"Next"
ellipse_text	省略的頁(yè)數(shù)用什么文字表示	可選字符串參數(shù)，默認(rèn)是"…"
prev_show_always	是否顯示“前一頁(yè)”分頁(yè)按鈕	布爾型，可選參數(shù)，默認(rèn)為true，即顯示“前一頁(yè)”按鈕
next_show_always	是否顯示“下一頁(yè)”分頁(yè)按鈕	布爾型，可選參數(shù)，默認(rèn)為true，即顯示“下一頁(yè)”按鈕
callback	回調(diào)函數(shù)	默認(rèn)無(wú)執(zhí)行效果

五、使用舉例

例如下面的使用代碼：

這段代碼表示的含義是：總共有56(maxentries)個(gè)列表項(xiàng)，首尾兩側(cè)分頁(yè)顯示2(num_edge_entries)個(gè)，連續(xù)分頁(yè)主體數(shù)目顯示4(num_display_entries)個(gè)，回調(diào)函數(shù)為pageselectCallback(callback)，每頁(yè)顯示的列表項(xiàng)為1(items_per_page)。您可以對(duì)照參數(shù)表修改配置這里的參數(shù)。六、關(guān)于demo的一些說(shuō)明

總共有三個(gè)demo，第一個(gè)demo就是個(gè)靜態(tài)的數(shù)據(jù)，直接寫(xiě)在HTML上；第二個(gè)使用Ajax加載HTML數(shù)據(jù)，然后進(jìn)行分頁(yè)顯示；第三個(gè)demo可以動(dòng)態(tài)修改一些參數(shù)觀察對(duì)應(yīng)的分頁(yè)效果。

所有demo頁(yè)面的js注釋我都改為了中文標(biāo)注，難點(diǎn)在于回調(diào)函數(shù)，demo中回調(diào)函數(shù)有兩個(gè)參數(shù)，一個(gè)是page_index，另一個(gè)是jq，前一個(gè)表示您當(dāng)前點(diǎn)擊的那個(gè)分頁(yè)的頁(yè)數(shù)索引值，后一個(gè)參數(shù)表示裝載容器。這里的頁(yè)數(shù)索引值是關(guān)鍵，我們要根據(jù)這個(gè)索引值找到對(duì)應(yīng)的（例如）HTML元素，然后再指定的容器中顯示出來(lái)，demo中提供了裝載單元素以及多元素的方法，相信不會(huì)有太大問(wèn)題。

好吧，就這些！

如果您發(fā)現(xiàn)文章中有表述不準(zhǔn)確或是有相關(guān)問(wèn)題需要交流可以通過(guò)評(píng)論或是去這里進(jìn)行提問(wèn)交流。
（本篇完）

最新評(píng)論