如何在AJAX调用中重新渲染Django模板代码 [英] How to re-render django template code on AJAX call

问题描述

我有一个视图，可将分页对象(在查询集上)发送到模板，然后进一步将其作为表呈现在模板中.我想做的是单击模板上分页栏上的页码，它应该进行ajax调用以获取该页码的分页输出，并动态地更新表的内容.

I have a view which sends paginated object (on a queryset) to a template, which I further render in template as a table. What I am trying to do is on clicking a page number on pagination bar on template, it should make an ajax call to get paginated output for that page number and update the content of table with it dynamically.

查看:

def accounts(request):
    #Including only necessary part
    accounts_list = Accounts.objects.all()
    paginator = Paginator(accounts_list, 25)
    page = request.GET.get('page')
    try:
        accounts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        accounts = paginator.page(1)
    except EmptyPage:
        # If page is out of range, deliver last page of results.
        accounts = paginator.page(paginator.num_pages)

    context['accounts'] = accounts
    return render(request, template, context)

模板将其加载为:

{% if accounts %}
<table id="acc">
    <tr>
        <th>Field 1</th>
        ...
        <th>Field N</th>
    </tr>
    {% for item in accounts %}
    <tr> 
        <td>{{ item.field1 }}</td>
        ...<!-- Some complex logic with template tags too in here -->
        <td>{{ item.fieldN }}</td>
    </tr>
    {% endfor %}
</table>
{% endif %}

现在用于分页栏，我正在使用 Bootpag的库，我可以将内容呈现为:

Now for pagination bar, I am using Bootpag's library, and I can render stuff as:

$('.pagination_top').bootpag({
   /*bootpag logic here */
}).on("page", function(event, num){
    //$.ajax loading here where I can update the table div with new output 
    //or make the table div "template code" reload without reloading page
}

---

对不起，我没有在ajax部分上尝试过很多，因为我完全空白如何使模板重新呈现不重新加载页面而返回的新帐户.

---

Sorry I haven't shown much of what I tried on ajax part since I am completely blank on how to make template re-render new accounts returned without reloading page.

我能想到的唯一肮脏的解决方案是在视图中生成我的整个html，然后使用返回的新html ajax更新表div的html?

The only dirty solution I can think of is generate my whole html in the view and then update the table div's html with new html ajax returned?

使用不用重新加载页面而编写的模板呈现逻辑来重新加载div表的简单方法是什么?可以通过将表部分制成单独的模板并包含/扩展模板来实现此目的吗?

What would be the easy way to say reload the table div using template rendering logic written without reloading page? Can this be achieved by making table part a separated template and including/extending templates?

请注意，因为完整的数据相对很大，所以我无法使用一种方法来获取模板上的所有数据，然后使用某些jquery/js libaray的分页逻辑.

Please note that I can not use a method of getting all data on template and then using pagination logic of some jquery/js libaray, because complete data is relatively very large.

推荐答案

我解决了以下问题:

将表格部分作为模板table.html分隔为:

Separated the table part as template table.html as:

app/table.html:

app/table.html:

{% if accounts %}
<table id="acc">
    <tr>
        <th>Field 1</th>
        ...
        <th>Field N</th>
    </tr>
    {% for item in accounts %}
    <tr> 
        <td>{{ item.field1 }}</td>
        ...<!-- Some complex logic with template tags too in here -->
        <td>{{ item.fieldN }}</td>
    </tr>
    {% endfor %}
</table>
{% endif %}

在主模板main.html中将其称为包含模板:

Called this in primary template main.html as included template:

app/main.html:

app/main.html:

<div class="table-responsive">
    {% include 'app/table.html' %}
</div>

现在，在我看来，如果请求是ajax请求，则添加仅渲染到table.html的行.

Now in my view I added a line which renders to only table.html if request is ajax request.

if request.is_ajax():
        return render(request, 'app/table.html', context)
#else
return render(request, 'app/main.html', context)

将分页表重新加载为:

$('.pagination_top').bootpag({
   /*bootpag logic here */
}).on("page", function(event, num){
    $(".table-responsive").html('').load(
        "{% url 'app:accounts' %}?page=" + num
    );
});

这篇关于如何在AJAX调用中重新渲染Django模板代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！