2016-09-27 121 views
3

我有一個視圖,它將查詢集中的分頁對象(發送到查詢集)發送到模板,我將模板作爲表格進一步呈現。我想要做的是點擊模板上的分頁欄上的頁碼,它應該進行ajax調用,以獲得該頁碼的分頁輸出,並動態更新表的內容。如何在AJAX調用中重新呈現Django模板代碼

查看:

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's library,我可以渲染的東西爲:

$('.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部分嘗試過的東西,因爲我完全空白瞭如何讓模板重新呈現無需重新加載頁面而返回的新帳戶。

我能想到的唯一骯髒的解決方案是在視圖中生成我的整個html,然後用新的html ajax返回更新表格div的html?

什麼是簡單的方法來說,重新加載表格div使用模板渲染邏輯寫入沒有重新加載頁面?這可以通過將表格部分作爲單獨的模板幷包含/擴展模板來實現?

請注意,我不能使用一種方法獲取模板上的所有數據,然後使用一些jquery/js libaray的分頁邏輯,因爲完整的數據是相當大的。

回答

3

我解決的問題如下:

分居表部分爲模板table.html爲:

應用程序/表。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中包含模板調用此:

應用程序/ main.html中:

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

現在,在我看來,我加入這使得只有一條線table.html如果請求是ajax請求。

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 
    ); 
}); 
+0

你的js腳本仍在重新加載頁面,頁面url是否隨着每次點擊而改變? – sgauri

1

如果你想依賴django模板,你應該重新加載頁面併發送請求中的分頁信息。這是通常做的事情(例如在django-admin中)。它需要重新加載頁面,但這是django模板的作用。

否則,我會委託整個渲染到客戶端,並提供只有在Django的JSON視圖。這樣,django將提供一個模板,其中包含一些標記以及您最喜歡的js庫,該模板負責完成AJAX調用並直接渲染數據。

UPDATE:

如果你真的需要做到這一點,你所提到的方法是可行的。沒有什麼能阻止你渲染你的模板的一部分,外包在單獨的文件中並將已經呈現的HTML發送給你的客戶端。

因此,您可以利用include template tag將表格模板移動到單獨的文件中。 對於AJAX調用,您應該使用第二個視圖,它只呈現模板的表格部分。

所有這些對我來說都是一種詭計,但它應該起作用。

+0

有沒有辦法使AJAX返回,在這種情況下Django的templatetags數據? 因爲我的邏輯很多取決於這些模板標籤 – MohitC

+0

我已經更新了關於您的評論的答案 – dahrens

+0

如果我必須在視圖本身中生成整個html,那麼分隔模板的需要是什麼? – MohitC

相關問題