淘先锋技术网

首页 1 2 3 4 5 6 7

jQuery Ajax翻页插件可以帮助开发者更方便地实现数据分页展示,并提高网站的用户体验。下面我们将介绍一款常用的jQuery Ajax翻页插件。

//翻页插件
$.fn.extend({
pagination:function(opts){
var defaults = {
itemsPerPage: 5,//每页显示个数
currentPage:1,//当前页
totalItems:0,//总共数据条数
totalPages:0,//总共的页数
pageUrl:'javascript:void(0);',//跳转链接
callBack:function(){//回调函数
}
};
var options = $.extend(defaults,opts);
return this.each(function(){
var $this = $(this);
var pageHTML = '';
//计算总页数
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');
//调用回调函数
options.callBack(currentPage);
});
});
}
});

使用方法:

//初始化翻页插件
$('#pageWrap').pagination({
itemsPerPage:5,
currentPage:1,
totalItems:100,
callBack:function(currentPage){
//通过Ajax获取当前页数据
$.ajax({
url:'url',
data:{page:currentPage},
dataType:'json',
success:function(data){
//显示数据
}
});
}
});

上述代码中,我们通过调用pagination方法,并传入参数,来初始化翻页插件。同时,我们还可以在回调函数中通过Ajax获取当前页数据,并将数据填充到页面中,实现了数据的分页展示。