夜猫的个人小站

       继续码起来

关于作者

微博北极熊硬糖
北京海淀区

网站建设第六天-分页显示

标签

利用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">&laquo;</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">&raquo;</span></a></li>
  </ul>

最新评论

发表评论
回到顶部