正在用django做一个社区网站  notewo.com ,其实想到要实现像google+ 那样的滚动加载功能。一直在想怎么做才好。

现在整理出来的步骤如下:

第一步、实现django的分页功能。

 

 
  
  1. vim views.py 
  2. from django.core.paginator import Paginator,InvalidPage,EmptyPage 
  3.  
  4.  
  5. def myBlog(request): 
  6.     form = PostForm(request.POST) 
  7.     commentform = CommentForm() 
  8.      
  9.     posts_list  = Blog.objects.order_by('-date').all() 
  10.   
  11.     paginator = Paginator(posts_list,20)  #显示20条记录
  12.     try : 
  13.         page = int(request.GET.get('page','1')) 
  14.     except ValueError: 
  15.         page = 1 
  16.  
  17.     try : 
  18.          posts = paginator.page(page) 
  19.     except (EmptyPage,InvalidPage): 
  20.          posts = paginator.page(paginator.num_pages) 
  21.      
  22.     t = get_template('notewo/blog.html') 
  23.     c = RequestContext(request,locals()) 
  24.     return HttpResponse(t.render(c)) 

 

 
  
  1. {% for  post in posts.object_list %} 
  2.    <li class="box bloglist" > 
  3.        (这里就随便放你的html代码了) 
  4.    </li> 
  5.  {% endfor %} 
  6.    <li class="page"> 
  7.        <div class="pagination"> 
  8.               <span class="step-links"> 
  9.            {% if posts.has_previous %} 
  10.                   <a href="?page={{ posts.previous_page_number }}">previous</a> 
  11.            {% endif %} 
  12.  
  13.           <span class="current"> 
  14.                   Page {{ posts.number }} of {{  posts.paginator.num_pages }}. 
  15.           </span> 
  16.  
  17.               {% if posts.has_next %} 
  18.                     <a href="?page={{ posts.next_page_number }}" class="nextpage">next</a> 
  19.                        <a   class="nextpage2">next</a> 
  20.               {% endif %} 
  21.               </span> 
  22.        </div> 
  23.    </li> 

第二步、

你应该留意一下,上面我写了一条:

 

 
  
  1. <a   class="nextpage2">next</a>  

的代码。小弟不才,只能借这种蠢方法。继续往下

 

 
  
  1. function getnextpage(){ 
  2.  
  3.     $(".nextpage2").click(function(){ 
  4.         var href = $(".nextpage").attr("href"); 
  5.         console.log(href); 
  6.         $.ajax({ 
  7.             type:"get", 
  8.             url: href, 
  9.             success:function(data){ 
  10.              var html = $(data).find(".showblog").html(); 
  11.              $(".pageli").remove(); 
  12.              $(".showblog").append(html); 
  13.                 //重新绑定点击事件 
  14.                 getnextpage(); 
  15.             } 
  16.         }) ;//end ajax 
  17.     }); // end    $(".nextpage) 

$(".showblog") 是顶层的ul

$(".nextpage2") 被点击之后,触发$(".nextpage"),捕捞返回的数据,再把其中的li数据添加到ul的尾部。

如果大家想要实现滚动滚动到底部自动添加的话,再改进一下已经不难了。睡觉了