快捷導(dǎo)航

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

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

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

實(shí)用jQuery分頁(yè)特效插件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)容

復(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)擊分頁(yè)按鈕的回調(diào)函數(shù) 函數(shù) function(){return false;}
current_page 初始化時(shí)選中的頁(yè)碼數(shù)字 0
items_per_page 每頁(yè)每頁(yè)顯示的記錄條數(shù) 數(shù)字 10
link_to 分頁(yè)鏈接字符串 #
num_display_entries 最多顯示的頁(yè)碼數(shù) 數(shù)字 11
next_text ‘下一頁(yè)'顯示的文字字符串 Next
next_show_always 如果設(shè)置為false‘下一頁(yè)'按鈕只有在還能增加頁(yè)碼的情況下才顯示布爾值 true
prev_show_always 如果設(shè)置為false‘上一頁(yè)'按鈕只有在還能導(dǎo)航到前一頁(yè)的情況下才顯示布爾值 true
prev_text ‘上一頁(yè)'顯示的文字字符串 Previous
num_edge_entries 如果設(shè)為1，那么永遠(yuǎn)會(huì)顯示首頁(yè)和末頁(yè) 1或0 0
ellipse_text 從當(dāng)前頁(yè)碼段到首頁(yè)或末頁(yè)之間的標(biāo)識(shí)字符串字符串 …
load_first_page 如果設(shè)置為true，那么回調(diào)函數(shù)將在插件初始化時(shí)就執(zhí)行布爾值 true

查看DEMO 插件下載

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

您可能感興趣的文章: