jQuery Pagination Ajax分頁外掛程式中文詳解

文章目錄

• 一、相關demo
• 二、簡介與說明
• 三、使用方法
• 四、參數
• 五、使用舉例
• 六、關於demo的一些說明

jQuery Pagination Ajax分頁外掛程式中文詳解

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=616

中文項目地址：http://www.zhangxinxu.com/jq/pagination_zh/
原項目地址：http://plugins.jquery.com/project/pagination
版本：v1.2
源檔案下載：英文原版 或中文翻譯修改版
翻譯：張鑫旭

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問原出處

一、相關demo

• 基本demo頁面
• Ajax demo頁面
• 參數可編輯demo頁面

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問原出處

二、簡介與說明

• 此jQuery外掛程式為Ajax分頁外掛程式，一次性載入，故分頁切換時無重新整理與延遲，如果資料量較大不建議用此方法，因為載入會比較慢。
• 原外掛程式CSS不太合理，使用浮動，故無法方便實現左右方向的定位，且未清除浮動，在中文修改版中我對其進行了最佳化，使其支援text-align的定位。
• 對原js檔案注釋進行了中文翻譯，demo頁面也是漢化了的，demo頁面的js與原demo有一些出入，但核心不變。

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問原出處

三、使用方法

跟一般的jQuery外掛程式一樣，此外掛程式使用也很簡單便捷。方法是pagination，例如$("#page").pagination(100);，這裡的100參數是必須的，表示顯示項目的總個數，這是最簡單的使用，得到的顯示如下：

還有一點值得一提的是分頁列表需要放在class類為pagination的標籤內，您可以使用text-align屬性控制分頁置中顯示還是居右顯示。

回呼函數一般用來裝載對應分頁顯示的內容，具體參見demo源檔案。

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問原出處

四、參數

參數名	描述	參數值
maxentries	總條目數	必選參數，整數
items_per_page	每頁顯示的條目數	選擇性參數，預設是10
num_display_entries	連續分頁主體部分顯示的分頁條目數	選擇性參數，預設是10
current_page	當前選中的頁面	選擇性參數，預設是0，表示第1頁
num_edge_entries	兩側顯示的首尾分頁的條目數	選擇性參數，預設是0
link_to	分頁的連結	字串，選擇性參數，預設是"#"
prev_text	“前一頁”分頁按鈕上顯示的文字	字串參數，可選，預設是"Prev"
next_text	“下一頁”分頁按鈕上顯示的文字	字串參數，可選，預設是"Next"
ellipse_text	省略的頁數用什麼文字表示	可選字串參數，預設是"…"
prev_show_always	是否顯示“前一頁”分頁按鈕	布爾型，選擇性參數，預設為true，即顯示“前一頁”按鈕
next_show_always	是否顯示“下一頁”分頁按鈕	布爾型，選擇性參數，預設為true，即顯示“下一頁”按鈕
callback	回呼函數	預設無執行效果

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問原出處

五、使用舉例

例如下面的使用代碼：

$("#Pagination").pagination(56, {    num_edge_entries: 2,    num_display_entries: 4,    callback: pageselectCallback,    items_per_page:1});

這段代碼錶示的含義是：總共有56(maxentries)個清單項目，首尾兩側分頁顯示2(num_edge_entries)個，連續分頁主體數目顯示4(num_display_entries)個，回呼函數為pageselectCallback(callback)，每頁顯示的清單項目為1(items_per_page)。您可以對照參數表修改配置這裡的參數。

本文地址： http://www.zhangxinxu.com/wordpress/?p=616

本文作者為：張鑫旭 來源於：張鑫旭-鑫空間-鑫生活 歡迎訪問

六、關於demo的一些說明

總共有三個demo，第一個demo就是個靜態資料，直接寫在HTML上；第二個使用Ajax載入HTML資料，然後進行分頁顯示；第三個demo可以動態修改一些參數觀察對應的分頁效果。

所有demo頁面的js注釋我都改為了中文標註，痛點在於回呼函數，demo中回呼函數有兩個參數，一個是page_index，另一個是jq，前一個表示您當前點擊的那個分頁的頁數索引值，後一個參數表示裝載容器。這裡的頁數索引值是關鍵，我們要根據這個索引值找到對應的（例如）HTML元素，然後再指定的容器中顯示出來，demo中提供了裝載單元素以及多元素的方法，相信不會有太大問題。

好吧，就這些！