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

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