原項目地址:http://plugins.jquery.com/project/pagination
版本:v1.2
源檔案下載:英文原版 或中文翻譯修改版
一、相關demo
- 基本demo頁面
- Ajax demo頁面
- 參數可編輯demo頁面
二、簡介與說明
- 此jQuery外掛程式為Ajax分頁外掛程式,一次性載入,故分頁切換時無重新整理與延遲,如果資料量較大不建議用此方法,因為載入會比較慢。
- 原外掛程式CSS不太合理,使用浮動,故無法方便實現左右方向的定位,且未清除浮動,在中文修改版中我對其進行了最佳化,使其支援text-align的定位。
- 對原js檔案注釋進行了中文翻譯,demo頁面也是漢化了的,demo頁面的js與原demo有一些出入,但核心不變。
三、使用方法
跟一般的jQuery外掛程式一樣,此外掛程式使用也很簡單便捷。方法是pagination
,例如$("#page").pagination(100);
,這裡的100參數是必須的,表示顯示項目的總個數,這是最簡單的使用,得到的顯示如下:
還有一點值得一提的是分頁列表需要放在class類為pagination的標籤內,您可以使用text-align屬性控制分頁置中顯示還是居右顯示。
回呼函數一般用來裝載對應分頁顯示的內容,具體參見demo源檔案。
四、參數
參數名 |
描述 |
參數值 |
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 |
回呼函數 |
預設無執行效果 |
五、使用舉例
例如下面的使用代碼:複製代碼 代碼如下:$("#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)。您可以對照參數表修改配置這裡的參數。六、關於demo的一些說明
總共有三個demo,第一個demo就是個靜態資料,直接寫在HTML上;第二個使用Ajax載入HTML資料,然後進行分頁顯示;第三個demo可以動態修改一些參數觀察對應的分頁效果。
所有demo頁面的js注釋我都改為了中文標註,痛點在於回呼函數,demo中回呼函數有兩個參數,一個是page_index,另一個是jq,前一個表示您當前點擊的那個分頁的頁數索引值,後一個參數表示裝載容器。這裡的頁數索引值是關鍵,我們要根據這個索引值找到對應的(例如)HTML元素,然後再指定的容器中顯示出來,demo中提供了裝載單元素以及多元素的方法,相信不會有太大問題。
好吧,就這些!
如果您發現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這裡進行提問交流。
(本篇完)