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

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