jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
版本:v1.2
源文件下載:英文原版 或中文翻譯修改版
一、相關(guān)demo 二、簡介與說明
- 此jQuery插件為Ajax分頁插件,一次性加載,故分頁切換時無刷新與延遲,如果數(shù)據(jù)量較大不建議用此方法,因為加載會比較慢。
- 原插件CSS不太合理,使用浮動,故無法方便實現(xiàn)左右方向的定位,且未清除浮動,在中文修改版中我對其進行了優(yōu)化,使其支持text-align的定位。
- 對原js文件注釋進行了中文翻譯,demo頁面也是漢化了的,demo頁面的js與原demo有一些出入,但核心不變。
跟一般的jQuery插件一樣,此插件使用也很簡單便捷。方法是pagination,例如$("#page").pagination(100);,這里的100參數(shù)是必須的,表示顯示項目的總個數(shù),這是最簡單的使用,得到的顯示如下:![]()
還有一點值得一提的是分頁列表需要放在class類為pagination的標簽內(nèi),您可以使用text-align屬性控制分頁居中顯示還是居右顯示。
回調(diào)函數(shù)一般用來裝載對應(yīng)分頁顯示的內(nèi)容,具體參見demo源文件。
四、參數(shù)| 參數(shù)名 | 描述 | 參數(shù)值 |
|---|---|---|
| maxentries | 總條目數(shù) | 必選參數(shù),整數(shù) |
| items_per_page | 每頁顯示的條目數(shù) | 可選參數(shù),默認是10 |
| num_display_entries | 連續(xù)分頁主體部分顯示的分頁條目數(shù) | 可選參數(shù),默認是10 |
| current_page | 當(dāng)前選中的頁面 | 可選參數(shù),默認是0,表示第1頁 |
| num_edge_entries | 兩側(cè)顯示的首尾分頁的條目數(shù) | 可選參數(shù),默認是0 |
| link_to | 分頁的鏈接 | 字符串,可選參數(shù),默認是"#" |
| prev_text | “前一頁”分頁按鈕上顯示的文字 | 字符串參數(shù),可選,默認是"Prev" |
| next_text | “下一頁”分頁按鈕上顯示的文字 | 字符串參數(shù),可選,默認是"Next" |
| ellipse_text | 省略的頁數(shù)用什么文字表示 | 可選字符串參數(shù),默認是"…" |
| prev_show_always | 是否顯示“前一頁”分頁按鈕 | 布爾型,可選參數(shù),默認為true,即顯示“前一頁”按鈕 |
| next_show_always | 是否顯示“下一頁”分頁按鈕 | 布爾型,可選參數(shù),默認為true,即顯示“下一頁”按鈕 |
| callback | 回調(diào)函數(shù) | 默認無執(zhí)行效果 |
五、使用舉例
例如下面的使用代碼:
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});
這段代碼表示的含義是:總共有56(maxentries)個列表項,首尾兩側(cè)分頁顯示2(num_edge_entries)個,連續(xù)分頁主體數(shù)目顯示4(num_display_entries)個,回調(diào)函數(shù)為pageselectCallback(callback),每頁顯示的列表項為1(items_per_page)。您可以對照參數(shù)表修改配置這里的參數(shù)。六、關(guān)于demo的一些說明
總共有三個demo,第一個demo就是個靜態(tài)的數(shù)據(jù),直接寫在HTML上;第二個使用Ajax加載HTML數(shù)據(jù),然后進行分頁顯示;第三個demo可以動態(tài)修改一些參數(shù)觀察對應(yīng)的分頁效果。
所有demo頁面的js注釋我都改為了中文標注,難點在于回調(diào)函數(shù),demo中回調(diào)函數(shù)有兩個參數(shù),一個是page_index,另一個是jq,前一個表示您當(dāng)前點擊的那個分頁的頁數(shù)索引值,后一個參數(shù)表示裝載容器。這里的頁數(shù)索引值是關(guān)鍵,我們要根據(jù)這個索引值找到對應(yīng)的(例如)HTML元素,然后再指定的容器中顯示出來,demo中提供了裝載單元素以及多元素的方法,相信不會有太大問題。
好吧,就這些!
如果您發(fā)現(xiàn)文章中有表述不準確或是有相關(guān)問題需要交流可以通過評論或是去這里進行提問交流。
(本篇完)
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery DataTables插件自定義Ajax分頁實例解析
- jQuery實現(xiàn)分頁功能(含ajax請求、后臺數(shù)據(jù)、附完整demo)
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- MVC+jQuery.Ajax異步實現(xiàn)增刪改查和分頁
- 使用Jquery+Ajax+Json如何實現(xiàn)分頁顯示附JAVA+JQuery實現(xiàn)異步分頁
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁)
- jquery+Ajax實現(xiàn)簡單分頁條效果
相關(guān)文章
jquery dataTable 后臺加載數(shù)據(jù)并分頁實例代碼
本篇文章主要介紹了jquery dataTable 后臺加載數(shù)據(jù)并分頁實例代碼,具有一定的參考價值,有興趣的可以了解一下2017-06-06
jQuery Animation實現(xiàn)CSS3動畫示例介紹
jQuery Animation的工作原理是通過將元素的CSS樣式從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài),下面以一個實例為大家詳細介紹下具體的實現(xiàn),感興趣的朋友可以參考下2013-08-08
jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例
這篇文章主要介紹了jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下2016-09-09
jQuery post數(shù)據(jù)至ashx實例詳解
這篇文章主要介紹了jQuery post數(shù)據(jù)至ashx實例詳解的相關(guān)資料,需要的朋友可以參考下2016-11-11
推薦11款jQuery開發(fā)的復(fù)選框和單選框美化插件
web開發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計的,因為不同的瀏覽器及其操作系統(tǒng)對于樣式的渲染展現(xiàn)是不一樣的。2011-08-08
jquery easyui dataGrid動態(tài)改變排序字段名的方法
jQuery easyui dataGrid 動態(tài)改變排序字段名,一般情況下,在使用的時候,我們會點擊相應(yīng)字段進行排序。今天小編以java為例給大家講解問題原因及解決方案,需要的的朋友參考下2017-03-03

