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

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