django 實現滾動式載入的功能

 正在用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的尾部。

如果大家想要實現滾動滾動到底部自動添加的話，再改進一下已經不難了。睡覺了

 

 

 

本文出自 “YEELONⒼ ” 部落格，請務必保留此出處http://yeelone.blog.51cto.com/1476571/940474