推荐自己用纯jquery写的一个ajax无限加载分页

PHP1661浏览0条评论无限JQuery

JQUERY

$(function(){

//加载评论\\
$('#loading').hide();//隐藏加载时图片
if('{$page_count}'==1){$('.more').hide();}//如果只有1页则隐藏加载按钮,{$page_count}=总页数

//开始点击加载按钮	
$(".more").click(function(){
$.ajaxSetup ({cache: false});//关闭ajax缓存,每次调用load方法前要调用一下这个方法才不加载缓存!
var page = $(this).attr("id");//获取当前页id,就是HTML提供的id做的个hack
var nextpage = page*1+1;//获取下一页的页码
$(this).before('<div class="hack cool'+nextpage+'"></div>');//每点击一次加载按钮,则添加一次hack容器来装取回来的内容,这里是关键!
$(this).attr("id",nextpage);//每按一次加载按钮,则把id设置成下一页的页码
$('.more,.say').hide();//正在加载时隐藏评论和加载按钮
$('#loading').show();//正在加载时显示加载图片
$(".cool"+nextpage).load('/News/comment/aid/{$Think.get.aid}/page/'+nextpage,function(){
$('.more,.say').show();//成功后显示加载按钮和评论按钮
$('#loading').hide();//成功后隐藏加载图片
if(nextpage=='{$page_count}'){$(".more").remove(); $(".say").before('<button class="more" style="background:#F0F0F0;"><span class="glyphicon glyphicon-ban-circle"></span>已全部加载!</button>');}//如果加载到最大页数则隐藏加载按钮,添加加载完毕提示
	});
});

});

HTML

<button name="loading" id="1" type="button" class="more">点击加载更多评论</button><!-- 这里的ID1表示当前是第一页 -->
<img id="loading" src="/images/loading.gif" />

虽然很代码写得很猥琐,我不太熟JQ,有的方法根本都不知道,如果知道了估计更简单,就不用那么猥琐了,不过不管怎么样功能还是实现了嘛,这种是不需要.AJAX请求返回JSON数据的方法。如果有什么不明白的地方,可以回复给我。

效果图:

本文地址:http://wuheng.net/blog_54.html 转载请注明出处

分享到: