Django implements the rolling Loading Function

We are using django as a community website notewo.com. In fact, we want to implement the rolling loading function like google +. I have been thinking about how to do it.

The steps are as follows:

Step 1: implement the paging function of 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) # display 20 records
  
  
Try:
  
  
Page = int (request. GET. get ('page', '1 '))
  
  
Failed t ValueError:
  
  
Page = 1
  
  
 
  
  
Try:
  
  
Posts = paginator. page (page)
  
  
Metadata T (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">
  
  
(Here you can just put your html code)
  
  
</Li>
  
  
{% Endfor %}
  
  
<Li class = "page">
  
  
<Div class = "pagination">
  
  
<Span class = "step-links">
  
  
{% If posts. has_previous %}
  
  
<A href = "? Page ={{ posts. previus_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>
 
 

Step 2,

You should note that I wrote the following:

 

 
 

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

. The younger brother is not talented. He can only use this stupid method. Continue

 

 
 

  
  
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" pai.html ();
  
  
$ (". Pageli"). remove ();
  
  
$ (". Showblog"). append (html );
  
  
// Rebind a click event
  
  
Getnextpage ();
  
  
}
  
  
}); // End ajax
  
  
}); // End $ (". nextpage)
  
  
}
 
 

$ (". Showblog") is the top-level ul

When $ (". nextpage2") is clicked, $ (". nextpage") is triggered to capture the returned data and add the li data to the end of ul.

If you want to automatically scroll to the bottom, it is no longer difficult to improve it. Sleeping

 

 

 

This article is from the "YEELON sources" blog, please be sure to keep this source http://yeelone.blog.51cto.com/1476571/940474