jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
版本:v1.2
源文件下載:英文原版 或中文翻譯修改版
一、相關demo 二、簡介與說明
- 此jQuery插件為Ajax分頁插件,一次性加載,故分頁切換時無刷新與延遲,如果數據量較大不建議用此方法,因為加載會比較慢。
- 原插件CSS不太合理,使用浮動,故無法方便實現左右方向的定位,且未清除浮動,在中文修改版中我對其進行了優(yōu)化,使其支持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 | 連續(xù)分頁主體部分顯示的分頁條目數 | 可選參數,默認是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 | 回調函數 | 默認無執(zhí)行效果 |
五、使用舉例
例如下面的使用代碼:
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
這段代碼表示的含義是:總共有56(maxentries)個列表項,首尾兩側分頁顯示2(num_edge_entries)個,連續(xù)分頁主體數目顯示4(num_display_entries)個,回調函數為pageselectCallback(callback),每頁顯示的列表項為1(items_per_page)。您可以對照參數表修改配置這里的參數。六、關于demo的一些說明
總共有三個demo,第一個demo就是個靜態(tài)的數據,直接寫在HTML上;第二個使用Ajax加載HTML數據,然后進行分頁顯示;第三個demo可以動態(tài)修改一些參數觀察對應的分頁效果。
所有demo頁面的js注釋我都改為了中文標注,難點在于回調函數,demo中回調函數有兩個參數,一個是page_index,另一個是jq,前一個表示您當前點擊的那個分頁的頁數索引值,后一個參數表示裝載容器。這里的頁數索引值是關鍵,我們要根據這個索引值找到對應的(例如)HTML元素,然后再指定的容器中顯示出來,demo中提供了裝載單元素以及多元素的方法,相信不會有太大問題。
好吧,就這些!
如果您發(fā)現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這里進行提問交流。
(本篇完)
相關文章
jquery dataTable 后臺加載數據并分頁實例代碼
本篇文章主要介紹了jquery dataTable 后臺加載數據并分頁實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-06-06
jquery easyui dataGrid動態(tài)改變排序字段名的方法
jQuery easyui dataGrid 動態(tài)改變排序字段名,一般情況下,在使用的時候,我們會點擊相應字段進行排序。今天小編以java為例給大家講解問題原因及解決方案,需要的的朋友參考下2017-03-03

