网站建设第六天-分页显示
标签
利用django自带Paginator模块自动对筛选出的数据分页,计算总页数,与前端交互,创建[HTML_REMOVED]标签显示页数
后台代码:
def get_html(post_list): #if request.is_ajax(): #判断request请求是否是Ajax类型的 t = get_template('blog/post.html') #获取模板内容 content_html = t.render(Context({'post_list':post_list})) #渲染模板生成想要的全部局部html内容,而不是某一个变量 payload = { 'content_html': content_html, 'success': True} #构造json类型数据,以方便前端处理 return HttpResponse(json.dumps(payload), content_type="application/json") #这个地方最好保证用json的方法传送数据,否则会出现意想不到的错误#用json类型返回数据到前端 @csrf_exempt def category(request,cat): user = request.user if request.user.is_authenticated() else None try: cat=cat.replace('/',"") except Exception,e: return HttpResponseRedirect(reverse('homepage')) article=Article.objects.filter(category=cat) latest_article_list=article.order_by('-date_time')[:] paginator=Paginator(latest_article_list, 3) # Show 25 contacts per pagelatest_article_list sum_page=paginator.num_pages page_range=paginator.page_range if request.method=="POST": current_page=int(request.POST.get('current_page'))+1 post_list=paginator.page(current_page) for post in post_list: post.content=post.content[0:300] return get_html(post_list) #request.method="GET": try: post_list=paginator.page(1) for post in post_list: post.content=post.content[0:300] except Exception, e: post_list="" return render(request,'blog/category.html',{'post_list':post_list,'user':user,'category':cat,'sum_page':sum_page,'page_range':page_range})
前端js代码
//---------------------异步加载数据---------------------------------------------------------------------------------------------------- $(function(){ var current_page=1; var a=$("ul.pagination>li>.page"); var pages={{sum_page}};//总页数,注意从0开始计 console.log(pages); var url = window.location.href; console.log(url); var color_o=a.css('color'); current_page=0 a[0].style.color="red"; //绑定上一页按钮事件 $("ul.pagination>li>a:first").click(function(event) { a[current_page].style.color=color_o; current_page-=1; //console.log(current_page); if(current_page<0){ current_page=0; }else{ //url=base_url.toString()+current_page; //window.location.replace(url); } a[current_page].style.color='red'; get_data(current_page,url); console.log('current_page'+current_page); }); //绑定下一页按钮事件 $("ul.pagination>li>a:last").click(function(event) { a[current_page].style.color=color_o; current_page+=1; //console.log(current_page); if(current_page>pages-1){ current_page=pages-1; }else{ //url=base_url.toString()+current_page; //window.location.replace(url); } a[current_page].style.color='red'; get_data(current_page,url); console.log('current_page'+current_page); }); //为每一个标签页绑定click事件 a.each(function(index, el) { $(this).click(function(event) { //console.log(index); if(index<=pages-1){ a[current_page].style.color=color_o; current_page=index; console.log('index:'+index); a[current_page].style.color='red'; get_data(current_page,url); }else{ alert("没有该页数据!") } }); }); }) function get_data(current_page,url){ $.ajax({ type: "POST", data: {current_page:current_page,}, url: url, cache: false, dataType: "json", success: function(data) { //var dat=jQuery.parseJSON(data); //$('.posts').children().remove(); //$('.posts').html(dat[0].fields.content); //console.log(dat[0].fields.content); $('.posts').children().remove();// $('.posts').html(data.content_html); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log('error'); } }) } //---------------------------------------------------------------------------------------------------------------------------------------------------
模板代码
post.html
{% for post in post_list %} <section class="post"> <header class="post-header"> <h5 class="post-title"><a href="{% url 'blog:detail' post.id %}">{{ post.title }}</a></h5> <p class="post-meta"> Time: {{ post.date_time |date:"Y-m-d H:i:s"}} <a class="category" href="#">{{ post.category }}</a> </p> <p class="post-meta"> 作者: <a class="post-author" href="#">{{ post.author }}</a> </p> </header> <div class="post-item post-description"> <p> {{ post.content}} </p> </div> <a class="pure-button" href="{% url 'blog:detail' post.id %}">阅读全文 <span class="glyphicon glyphicon-resize-full"></span></a> <a class="pure-button" href="{% url 'blog:edit' post.id %}">编 辑 <span class="glyphicon glyphicon-edit"></span></a> <a class="pure-button" href="{% url 'blog:delete' post.id %}">删 除<span class="glyphicon glyphicon-trash"></span></a> </section> {% endfor %}
页码代码
<!--分页符--> <ul class="pagination"> <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> {% for page_num in page_range %} <li><a class="page" href="#">{{page_num}}</a></li> {%endfor%} <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul>
最新评论