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获取当前页数据,并将数据填充到页面中,实现了数据的分页展示。