jQuery Ajax翻頁插件可以幫助開發(fā)者更方便地實現(xiàn)數(shù)據(jù)分頁展示，并提高網(wǎng)站的用戶體驗。下面我們將介紹一款常用的jQuery Ajax翻頁插件。

//翻頁插件
$.fn.extend({
pagination:function(opts){
var defaults = {
itemsPerPage: 5,//每頁顯示個數(shù)
currentPage:1,//當前頁
totalItems:0,//總共數(shù)據(jù)條數(shù)
totalPages:0,//總共的頁數(shù)
pageUrl:'javascript:void(0);',//跳轉(zhuǎn)鏈接
callBack:function(){//回調(diào)函數(shù)
}
};
var options = $.extend(defaults,opts);
return this.each(function(){
var $this = $(this);
var pageHTML = '';
//計算總頁數(shù)
options.totalPages = Math.ceil(options.totalItems/options.itemsPerPage);
//生成頁碼
for(var i=1;i<=options.totalPages;i++){
pageHTML += ''+i+'';
}
$this.html(pageHTML);//將頁碼填充到容器中
//顯示當前頁
$this.find('[data-page="'+options.currentPage+'"]').addClass('current');
//綁定翻頁事件
$this.find('a').on('click',function(){
var currentPage = parseInt($(this).attr('data-page'),10);
$this.find('a').removeClass('current');
$(this).addClass('current');
//調(diào)用回調(diào)函數(shù)
options.callBack(currentPage);
});
});
}
});

使用方法:

//初始化翻頁插件
$('#pageWrap').pagination({
itemsPerPage:5,
currentPage:1,
totalItems:100,
callBack:function(currentPage){
//通過Ajax獲取當前頁數(shù)據(jù)
$.ajax({
url:'url',
data:{page:currentPage},
dataType:'json',
success:function(data){
//顯示數(shù)據(jù)
}
});
}
});

上述代碼中，我們通過調(diào)用pagination方法，并傳入?yún)?shù)，來初始化翻頁插件。同時，我們還可以在回調(diào)函數(shù)中通過Ajax獲取當前頁數(shù)據(jù)，并將數(shù)據(jù)填充到頁面中，實現(xiàn)了數(shù)據(jù)的分頁展示。