快捷導(dǎo)航

jQuery插件pagination實(shí)現(xiàn)分頁特效

更新時間：2015年04月12日 17:17:19 投稿：hebedich

jQuery分頁插件示例，ajax方式的jQuery前端分頁插件，其核心代碼jquery.pagination.js已隨示例打包，Demo中包括了5種不同的分頁效果演示，全部是Ajax無刷新方式實(shí)現(xiàn)分頁，對于搞前端開發(fā)的朋友來說，這是個值得收藏的代碼特效，為以后實(shí)現(xiàn)無刷新分頁提供方便。

實(shí)用jQuery分頁特效插件jquery.pagination.js，基于jQuery實(shí)現(xiàn)，可根據(jù)pageselectCallback函數(shù)callback調(diào)用通過ajax調(diào)用動態(tài)數(shù)據(jù)，目前的方法是生成JSON數(shù)據(jù)到JS文件，調(diào)用的數(shù)據(jù)是JSON格式數(shù)據(jù)，缺點(diǎn)是數(shù)據(jù)是一次性讀出來的，效率會差些，插件支持眾多參數(shù)的自定義配置功能，還是很不錯的，大家可以根據(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)容

復(fù)制代碼代碼如下:

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ù)字 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)會顯示首頁和末頁 1或0 0
ellipse_text 從當(dāng)前頁碼段到首頁或末頁之間的標(biāo)識字符串字符串 …
load_first_page 如果設(shè)置為true，那么回調(diào)函數(shù)將在插件初始化時就執(zhí)行布爾值 true

查看DEMO 插件下載

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: