jQuery插件pagination實(shí)現(xiàn)分頁特效
實(shí)用jQuery分頁特效插件jquery.pagination.js，基于jQuery實(shí)現(xiàn)，可根據(jù)pageselectCallback函數(shù)callback調(diào)用通過ajax調(diào)用動(dòng)態(tài)數(shù)據(jù)，目前的方法是生成JSON數(shù)據(jù)到JS文件，調(diào)用的數(shù)據(jù)是JSON格式數(shù)據(jù)，缺點(diǎn)是數(shù)據(jù)是一次性讀出來的，效率會(huì)差些，插件支持眾多參數(shù)的自定義配置功能，還是很不錯(cuò)的，大家可以根據(jù)自己的想法進(jìn)行改進(jìn)。
使用方法：
1.加載插件和jQuery
<link rel="stylesheet" href="pagination.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.pagination.js"></script>
2.HTML內(nèi)容
<div class="pagination"></div>
3.函數(shù)調(diào)用
<script type="text/javascript">
function pageselectCallback(page_index, jq){
alert(page_index);
return false;
}
$(document).ready(function(){
$(".pagination").pagination(100, {
callback: pageselectCallback,
num_edge_entries: 1,
});
});
</script>
參數(shù)配置解釋
參數(shù)名 參數(shù)說明 可選值 默認(rèn)值
callback 點(diǎn)擊分頁按鈕的回調(diào)函數(shù) 函數(shù) function(){return false;}
current_page 初始化時(shí)選中的頁碼 數(shù)字 0
items_per_page 每頁每頁顯示的記錄條數(shù) 數(shù)字 10
link_to 分頁鏈接 字符串 #
num_display_entries 最多顯示的頁碼數(shù) 數(shù)字 11
next_text ‘下一頁'顯示的文字 字符串 Next
next_show_always 如果設(shè)置為false‘下一頁'按鈕只有在還能增加頁碼的情況下才顯示 布爾值 true
prev_show_always 如果設(shè)置為false‘上一頁'按鈕只有在還能導(dǎo)航到前一頁的情況下才顯示 布爾值 true
prev_text ‘上一頁'顯示的文字 字符串 Previous
num_edge_entries 如果設(shè)為1，那么永遠(yuǎn)會(huì)顯示首頁和末頁 1或0 0
ellipse_text 從當(dāng)前頁碼段到首頁或末頁之間的標(biāo)識(shí)字符串 字符串 …
load_first_page 如果設(shè)置為true，那么回調(diào)函數(shù)將在插件初始化時(shí)就執(zhí)行 布爾值 true
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- jQuery DataTables插件自定義Ajax分頁實(shí)例解析
- jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
- jquery分頁插件jquery.pagination.js使用方法解析
- 一款Jquery 分頁插件的改造方法（服務(wù)器端分頁）
- Jquery 分頁插件之Jquery Pagination
- jQuery Pagination分頁插件使用方法詳解
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁插件
- 快速掌握jquery分頁插件jqPaginator的使用方法
- jquery插件pagination實(shí)現(xiàn)無刷新ajax分頁
- jQuery分頁插件jquery.pagination.js使用方法解析
- jQuery插件simplePagination的使用方法示例
相關(guān)文章
JQuery jsonp 使用示例，想學(xué)習(xí)的朋友可以參考下。2009-08-08
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Jquery實(shí)現(xiàn)鼠標(biāo)移上彈出提示框、移出消失思路及代碼
具體思路為：.首先要定位實(shí)現(xiàn)這種效果的元素 ，本次通過class；如果是動(dòng)態(tài)顯示不同的提示內(nèi)容，需設(shè)置title;通過JQ給定位到元素加上 mouseover 和mouseout 事件2013-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑向當(dāng)前圖片高亮顯示并且其它圖片變灰的方法,涉及jquery鏈?zhǔn)讲僮骷绊撁嬖貥邮娇刂频南嚓P(guān)技巧,需要的朋友可以參考下2015-07-07
本文給大家推薦了25個(gè)jQuery網(wǎng)格特效插件，在此集合中，我們將展示一些非常酷的jQuery插件和資源在網(wǎng)格布局設(shè)計(jì)，提高了數(shù)據(jù)的介紹。一些實(shí)用的插件，一定會(huì)提供一個(gè)美好的用戶體驗(yàn)。同時(shí)，一些精致的資源，這將有助于布局精美的數(shù)據(jù)范圍。2014-11-11
使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接
這篇文章主要介紹了使用delegate方法為一個(gè)tr標(biāo)簽加一個(gè)鏈接，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)，需要的朋友可以參考下2014-06-06
jquery html添加元素/刪除元素操作實(shí)例詳解
這篇文章主要介紹了jquery html添加元素/刪除元素操作,結(jié)合實(shí)例形式詳細(xì)分析了jquery html添加元素/刪除元素相關(guān)函數(shù)功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
在日常開發(fā)中JQuery是我們使用最頻繁的JS庫(kù)。使用JQuery進(jìn)行開發(fā)，你需要先了解JQuery的基本語法。下面是在學(xué)習(xí)JQuery時(shí)總結(jié)的一些簡(jiǎn)單語法。2015-02-02
本文通過實(shí)例代碼給大家介紹了jquery 與css相結(jié)合實(shí)現(xiàn)的下拉列表功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取h1-h6標(biāo)題元素值的方法,涉及$(":header")選擇器操作h1-h6元素及事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-03-03