首頁  >  文章  >  web前端  >  jQuery外掛pagination實現分頁特效_jquery

jQuery外掛pagination實現分頁特效_jquery

WBOY
WBOY原創
2016-05-16 16:04:401200瀏覽

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

使用方法:

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內容

複製程式碼 程式碼如下:


3.函數呼叫

<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

查看DEMO   外掛程式下載

以上所述就是本文的全部內容了,希望大家能夠喜歡。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn