正在用django做一个社区网站 notewo.com ,其实想到要实现像google+ 那样的滚动加载功能。一直在想怎么做才好。
现在整理出来的步骤如下:
第一步、实现django的分页功能。
- vim views.py
- from django.core.paginator import Paginator,InvalidPage,EmptyPage
- def myBlog(request):
- form = PostForm(request.POST)
- commentform = CommentForm()
- posts_list = Blog.objects.order_by('-date').all()
- paginator = Paginator(posts_list,20) #显示20条记录
- try :
- page = int(request.GET.get('page','1'))
- except ValueError:
- page = 1
- try :
- posts = paginator.page(page)
- except (EmptyPage,InvalidPage):
- posts = paginator.page(paginator.num_pages)
- t = get_template('notewo/blog.html')
- c = RequestContext(request,locals())
- return HttpResponse(t.render(c))
- {% for post in posts.object_list %}
- <li class="box bloglist" >
- (这里就随便放你的html代码了)
- </li>
- {% endfor %}
- <li class="page">
- <div class="pagination">
- <span class="step-links">
- {% if posts.has_previous %}
- <a href="?page={{ posts.previous_page_number }}">previous</a>
- {% endif %}
- <span class="current">
- Page {{ posts.number }} of {{ posts.paginator.num_pages }}.
- </span>
- {% if posts.has_next %}
- <a href="?page={{ posts.next_page_number }}" class="nextpage">next</a>
- <a class="nextpage2">next</a>
- {% endif %}
- </span>
- </div>
- </li>
第二步、
你应该留意一下,上面我写了一条:
- <a class="nextpage2">next</a>
的代码。小弟不才,只能借这种蠢方法。继续往下
- function getnextpage(){
- $(".nextpage2").click(function(){
- var href = $(".nextpage").attr("href");
- console.log(href);
- $.ajax({
- type:"get",
- url: href,
- success:function(data){
- var html = $(data).find(".showblog").html();
- $(".pageli").remove();
- $(".showblog").append(html);
- //重新绑定点击事件
- getnextpage();
- }
- }) ;//end ajax
- }); // end $(".nextpage)
- }
$(".showblog") 是顶层的ul
当$(".nextpage2") 被点击之后,触发$(".nextpage"),捕捞返回的数据,再把其中的li数据添加到ul的尾部。
如果大家想要实现滚动滚动到底部自动添加的话,再改进一下已经不难了。睡觉了
转载于:https://blog.51cto.com/yeelone/940474