萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery插件pagination實現分頁特效

jQuery插件pagination實現分頁特效

 實用jQuery分頁特效插件jquery.pagination.js,基於jQuery實現,可根據pageselectCallback函數callback調用通過ajax調用動態數據,目前的方法是生成JSON數據到JS文件,調用的數據是JSON格式數據,缺點是數據是一次性讀出來的,效率會差些,插件支持眾多參數的自定義配置功能,還是很不錯的,大家可以根據自己的想法進行改進。

jQuery插件pagination實現分頁特效 三聯

使用方法:

1.加載插件和jQuery

1 2 3 <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內容

 

代碼如下:
<div class="pagination"></div>

 

3.函數調用

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 <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>

參數配置解釋

參數名 參數說明 可選值 默認值

callback 點擊分頁按鈕的回調函數 函數 function(){return false;}
current_page 初始化時選中的頁碼 數字 0
items_per_page 每頁每頁顯示的記錄條數 數字 10
link_to 分頁鏈接 字符串 #
num_display_entries 最多顯示的頁碼數 數字 11
next_text ‘下一頁'顯示的文字 字符串 Next
next_show_always 如果設置為false‘下一頁'按鈕只有在還能增加頁碼的情況下才顯示 布爾值 true
prev_show_always 如果設置為false‘上一頁'按鈕只有在還能導航到前一頁的情況下才顯示 布爾值 true
prev_text ‘上一頁'顯示的文字 字符串 Previous
num_edge_entries 如果設為1,那麼永遠會顯示首頁和末頁 1或0 0
ellipse_text 從當前頁碼段到首頁或末頁之間的標識字符串 字符串 …
load_first_page 如果設置為true,那麼回調函數將在插件初始化時就執行 布爾值 true

copyright © 萬盛學電腦網 all rights reserved